将鼠标悬停在文本上,图像淡入和淡出

Question

我昨天得到了一些帮助,当一个图像在另一个链接上空盘旋时,图像会淡入,但是我很难弄清楚如何让它淡出.这可能涉及java？我道歉,因为我对更高级的编码(过去的基本CSS/HTML)很陌生.

这是昨天有人给我的东西,它很好地消失了,但是当你从链接中移除鼠标时,它就像淡出一样.

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

示例小提琴

请注意,我加速了小提琴中的过渡,因为在我的经验中,5秒对于淡入效果有点过分.