I had some help yesterday with getting an image to fade in when hovering over another link, but I'm having a hard time figuring out how to get it to fade out. This might involve java? My apologizes, as I am quite new to more advanced coding (past basic CSS/HTML).
Here's what someone gave me yesterday, which fades in nicely, but id like it to fade out once you remove your mouse from the link.
img { opacity: 0; }
a:hover +img {
-webkit-animation: changeOpacity 5s;
animation: changeOpacity 5s;
}
@-webkit-keyframes changeOpacity {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* Standard syntax */
@keyframes changeOpacity {
0% { opacity: 0; }
100% { opacity: 1; }
}
And this is the HTML:
<a href="http://lorempixel.com/300/300/sports/1">
Hover the see Full image,click to go there
</a>
<img src="http://lorempixel.com/300/300/sports/1" width="200" height="200" />
<br>
<a href="http://lorempixel.com/300/300/sports/1">
Hover the see Full image,click to go there
</a>
<img src="http://lorempixel.com/300/300/sports/1" width="200" height="200" />
Any help would be greatly appreciated!
Keyframes is massive overkill here. You can simply use transition
and then change the opacity
value as needed:
img {
opacity: 0;
transition: opacity 5s;
}
a:hover +img {
opacity: 1;
}
Note that I sped up the transition in the Fiddle as 5 seconds is a little excessive for a fade-in effect in my experience.
Here's how I'd do it : (run it directly below)
$('a').hover( function(){ $(this).parent().find('img').css('opacity',1) }, function(){ $(this).parent().find('img').css('opacity',0) });
img{ opacity : 0; transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -webkit-transition: opacity 1s ease-in-out; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <a href="http://lorempixel.com/300/300/sports/1">Hover the see Full image,click to go there</a> <br> <img src="http://lorempixel.com/300/300/sports/1" width="200" height="200" /> </div> <div> <a href="http://lorempixel.com/300/300/sports/1">Hover the see Full image,click to go there</a><br> <img src="http://lorempixel.com/300/300/sports/1" width="200" height="200" /> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.