Hover Over Text, Image Fades In & Out

Question

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!

Rory McCrossan · Accepted Answer · 2015-02-06T16:19:54.817

7

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;
}

Example Fiddle

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.

edited Feb 06 '15 at 16:19

answered Feb 06 '15 at 16:14

Rory McCrossan

331,213
40
305
339

Or transition just the `opacity`? – Jivings Feb 06 '15 at 16:15
@Jivings Yep, you could restrict it if needed. – Rory McCrossan Feb 06 '15 at 16:16
1

[Don't use `transition:all` unless it's necessary](http://stackoverflow.com/questions/8947441/css3-transitions-is-transition-all-slower-than-transition-x). – Jivings Feb 06 '15 at 16:19
1

@Jivings thanks - every day is a school day. Updated. – Rory McCrossan Feb 06 '15 at 16:20
Great thank you so much! I'm assuming this code will work if I decide to position the images/text in various places on the page? – Plant Boy Feb 06 '15 at 16:25
Glad to help. So long as the `img` elements are a sibling of the `a`, yes, it'll work anywhere in the page. – Rory McCrossan Feb 06 '15 at 16:25

score 0 · Answer 2 · answered Feb 06 '15 at 16:25

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>

Hover Over Text, Image Fades In & Out

2 Answers2