Наведите указатель мыши на текст, изображение Fades In & Out

Question

У меня была некоторая помощь вчера, когда у меня получилось изображение, когда оно зависало над другой ссылкой, но мне трудно понять, как заставить его исчезнуть. Это может быть связано с Java? Я извиняюсь, так как я совершенно новичок в более продвинутом кодировании (прошлый базовый CSS/HTML).

Вот что вчера дал мне кто-то, который исчезает красиво, но id как он исчезает, как только вы удаляете свою мышь из ссылки.

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

И это 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" /> 

Любая помощь будет принята с благодарностью!

Answer 1

Ключевых кадров здесь массивный избыток. Вы можете просто использовать transition, а затем изменить значение opacity по мере необходимости:

img { 
    opacity: 0; 
    transition: opacity 5s; 
} 
a:hover +img { 
    opacity: 1; 
} 

Example Fiddle

Обратите внимание, что я ускорил переход в Fiddle в 5 секунд немного чрезмерное для замирания в силе в мой опыт.

Answer 2

Вот как я это сделать: (запустить его непосредственно ниже)

$('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>