html - 图像悬停效果问题

Question

您好，我正在尝试在 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/

Answer 1

你想要这样，查看DEMO http://jsfiddle.net/yeyene/Nnd7w/17/

div {
    width: 350px;
    font-size:12px;
    position: relative;    
}
div img{
    padding:0 10px;    
}
.link-cont {
    background: red;
    position: absolute;
    bottom: 0;
    width: 370px;
    height: 210px; 
    opacity: 0;
    transition: all 0.4s;
    z-index: -1
}
div:hover  .link-cont {
    opacity: 1; 
    bottom:-40px;
}
.link-cont a{    
    opacity: 0;  
}
div:hover  .link-cont a{
    position: relative; 
    opacity: 1; 
    bottom:-175px;
    left:10px;
    background:#fff;
    color:red;
    text-decoration:none;
    padding:0 10px;
}