I'm quite new to CSS Animations. I've put together a simple effect whereby a link is hovered and a title appears and the opacity of a div on top of the image fades up.
我对CSS动画很陌生。我把一个简单的效果放在一起，一个链接被悬空，一个标题出现，一个div在图像顶部的不透明度消失。
This is all working and shown on this mockup:
这是所有工作和显示在这个模型:
http://tinyurl.com/l2rln4k
What I'm trying to do with no success is have the opacity div fade back down when the link area is exited (hover out). Can anyone help?
我要做的是，当链接区域退出时，不透明度div会淡出(鼠标悬停)。谁能帮忙吗?
1 个解决方案
#1
0
Ok so on your .overlay class make it always have a position: absolute and top: 0, left: 0; then add a transition to the background (i did .5s worked fine). The problem you have now is that when the anchor is not hovered the overlay is placed bellow it and not on top.
在你的。叠加类中它总是有一个位置:绝对和顶部:0，左:0;然后添加一个过渡到背景(我做了。5s工作得很好)。现在的问题是，当锚不悬空时，覆盖层会被压下而不是放在顶部。
Tell me if that works
告诉我这样行不行
#1
0
Ok so on your .overlay class make it always have a position: absolute and top: 0, left: 0; then add a transition to the background (i did .5s worked fine). The problem you have now is that when the anchor is not hovered the overlay is placed bellow it and not on top.
在你的。叠加类中它总是有一个位置:绝对和顶部:0，左:0;然后添加一个过渡到背景(我做了。5s工作得很好)。现在的问题是，当锚不悬空时，覆盖层会被压下而不是放在顶部。
Tell me if that works
告诉我这样行不行