您好,我正在尝试在 img 上创建悬停效果。
HTML
<div>
<img src="http://placehold.it/350x150"/>
<div class="link-cont"><a href="#">click here to see more info</a></div>
</div>
css
div {
width: 350px;
position: relative;
}
.link-cont {
background: red;
position: absolute;
bottom: 0;
height: 100px;
opacity: 0;
transition: all 0.4s;
}
div:hover .link-cont {
opacity: 1;
bottom:-100px;
}
当用户将鼠标悬停在它上面时,我需要这样的东西
但我得到了这样的东西
有人可以帮助我实现我想要做的事情..
jsFid--> http://jsfiddle.net/Nnd7w/