I'm trying to make an image fade when hovering and just normal when not hovering. When I just put my code in a small html file everything seems to work fine. But when I insert my code into a wordpress website, using the Black Studio Tiny MCE plugin, only the fading away seems to work. Does someone maybe have an idea how to solve this?
Thanks,
J.
#test_menu {
opacity: 0.6;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
#test_menu:hover {
opacity: 1.0;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}
<div style="position:relative;width:496.5px;height:124.125px;">
<a href="https://epowerhr.be/hr-software-oplossing-talent/ehrm-performance-management-software/">
<img id="test_menu" src="https://epowerhr.be/wp-content/uploads/2014/10/shutterstock_190964189.jpg" style="position:absolute;left:0;top:0;" />
<p style="z-index:100;position:absolute;color:black;font-size:24px;font-weight:bold;left:50px;top:50px;">
Performance management
</p></a>
</div>
Something like this?
img, img:hover {-webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
img:hover {opacity: 0;}
<img src="http://placehold.it/350x150" />
Related
So I've got this circle that is rotating on hover but it's not centered and I don't know why (I did add the 'transform-origin:center center')
And also, sorry I know very very little about css but what does it do/mean when there's two consecutive selectors pls?
Here's my code:
#welcome:hover #welcomeavatar{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
transform-origin : center center;
}
#welcome #welcomeavatar{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
transform-origin : center center;
}
#welcome:hover #speechbubble{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin-left:120px;
}
#welcome #speechbubble{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#welcome #speechbubble{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
<div id="welcome">
<div id="welcomeavatar"><img src="http://www.for-example.org/img/main/forexamplelogo.png"></div>
<div id="speechbubble"></div>
The snippet isn't showing what's really happening but it's just so you can have my code and here's the real result : www.typhotoshop.tumblr.com
Thank you for taking the time!
The rotation is actually around the center, but the div you're applying the rotation to is larger than your image. See screenshot below:
You'll want to make sure the div you're rotating is exactly the same size as the image inside(ie. remove width/height from that div altogether or add width/height that is the same as the image).
Also, the margin-left on the #speechbubble increases on the hover as well, so again, the rotating div moves left. Make that margin the same on hover and no-hover and it won't move.
Hope that helps.
Apparently I don't know how to Stack Overflow. My original comment as an actual answer:
It's off center because the element you are rotating (#welcomeavatar) is display:block which takes up the full width of its container. Making it display inline-block is less than ideal because it can insert unwanted whitespace.
You should give #welcomeavatar a width and a height of 200px (the same as your image). Then you need to add some styles to your image as well to get rid of the wobble. Make your image display:block and add a height/width of 200px as well.
I have a hovering effect on an image. If you mouseover it and stay there with the mouse, the transition will be execute with its given duration.
I have also done the correct transition when you leave the spot.
Now, i want that the hover transition starts with the given duration, no matter if you just hovered over the image for a quick 1millisecond.
Is this only possible with javascript?
.example { position: absolute;
left: 0;
height:320px;
bottom: 0;
width: 100%;
background: #000;
background-color: rgba(255, 255, 255, 0.4);
opacity:0;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
-ms-transition: background-color 2s ease-out;
transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
text-align: center;
line-height: 299px;
text-decoration: none;
color: #000000;
font-size:30pt;
}
.image:hover .example { background-color: rgba(255, 255, 255, 0.4);
-webkit-transition: background-color 0.5s ease-in-out;
-moz-transition: background-color 0.5s ease-in-out;
-o-transition: background-color 0.5s ease-in-out;
-ms-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
opacity:1;
}
With this, if i hover over the image, my text and background colors animating in and when i leave the image the text and background color is animating out. It works okay. (even though, my above code is a bit unsorted for now)
So, all i want is that the fading in and out animation will be fully executed even if i just hover fast over the image and back.
I think it is not possible is it? (with css only i mean)
I am afraid, you would have to use a bit of Javascript because as far as I know, it is not possible to do it without javascript.
Add a class on hover, and remove it on animation end. Refer to this answer to know how to do that - css3 animation on :hover; force entire animation
PS: I would have put this is a comment, but I don't have the privileges right now.
I have a jsfiddle set up of the code I have so far. Basically I can't seem to make the rollover animation happen with hover for the main body of text in each ul.
So when you rollover the individual areas the code for opacity on these classes.....
.browser .statistic,
.browser .download {
display: block;
opacity: 0;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
Becomes 1. But i can't seem to get the transition animation to happen Can someone point me in the right direction.
Cheers,
Greg.
sorry if i missunderstanding you.
i just added:
li:hover .browser * {
opacity: 1;
-webkit-transition:opacity 1500ms ease-out;
-moz-transition:opacity 1500ms ease-out;
-o-transition:opacity 1500ms ease-out;
transition:opacity 1500ms ease-out;
}
DEMO: http://jsfiddle.net/zn09vjbv/1/
UPDATE:
is there any way to get the "h2 span" class to also change its
background position when the li is hover ?
yes, just add this: (add any attribute you like inside this class)
li:hover .browser h2 {
background: #000;
color; #FFF;
......
}
you need to set the transition on the main class of the object you are trying to animate, not on the class you are adding on hover
.initial-element{
opacity:1;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.initial-element:hover{
opacity:0;
}
I've recently added some new code to my tumblr blog's html. Normally the images will scroll over fluently, but with the new code it doesn't anymore. The new code adds an effect that the images go from greyscale to normal. This is the code:
.post {
-webkit-filter: grayscale(100%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.post:hover {
-webkit-filter: grayscale(0%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
truelions.tumblr.com
Depending on the browser, the fault is different.
Chrome: posts "stick" for a bit while scrolling
Safari: posts are loading correctly, but feels slow. Is this because of safari 7.0 maybe?
Can someone please look at it for me, if needed more code I will supply.
Thanks.
I made custom tooltip, and before applying any CSS3 animation I displayed those tooltips using display: none; for hiding it, and display: inline-block; for showing tooltip. This works ok, but now I want to animate opacity of tooltip, so it have nice fade effect. But, I have problems with this, so I need your help. This is what I've tried:
.title div.tooltip{
display: inline-block;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.title:hover div.tooltip{
display: inline-block;
filter: alpha(opacity=50);
opacity: 0.5;
}
and this is markup:
<li class="title">
<div class="tooltip">
<label><em>Full title:</em> <?php echo $groups['title']; ?></label><br>
<label><em>Description:</em> <?php echo $groups['description']; ?></label><br>
</div>
</li>
Removing the filter: alpha(opacity=50); and adding the opacity:0; to .title div.tooltip{... worked for me.
The default for the opacity was 1, so the fade-in was going from 1 to 0.5 -- Also, I believe the filter: alpha(opacity=50) was overwriting the opacity transition completely and jumping right to opacity=50. You could also have added transitions for filter
.title:hover div.tooltip{
display: inline-block;
opacity: 0.5;
}
.title div.tooltip{
display: inline-block;
opacity: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
see updated JsFiddle - includes your complete css found in comments.