问题悬停对图像的影响

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

Answer 2

我只是改变bottom:-100px;到top: 160px;并能正常工作！

Fiddle

编辑：一些更多的选择，因为我不明白：

Fiddle，和一个我想你想：Fiddle（如果你真的悬停，一个人的凌乱，但悬停只激活上的图像。）

Answer 3

做了一些修改，你CSS

div { 
    width: 370px; 
    position: relative; 
} 
.link-cont { 
    background: red; 
    position: absolute; 
    top: 0; 
    width: 370px; 
    height: 200px; 
    opacity: 0; 
    transition: all 0.4s; 
    z-index: -1 
} 
div:hover .link-cont { 
    opacity: 1; 
} 
div:hover img { 
    margin-left: 10px; 
    margin-top: 10px; 
} 
.link { 
    display: block; 
    margin-top: 170px; 
    margin-left: 50px; 
} 

相反玩底部属性，我只是改变了不透明度。我还分配了一个类来锚标签，使其显示在图像下。此外，你可以看到我给了图像的一些边缘，使其居中，并改变了链接计数div的宽度和高度。

见Fiddle

Answer 4

试试这个 - ，让我知道它是否适合你..

Fiddle

短短几年的变化 - 可以使用一些清理。

 div { 
    position: relative; 
    top: 50px; 
    background-color: blue; 
    width: 350px; 
    height: 150px; 
    margin: auto; 
} 
.link-cont { 
    background: red; 
    position: relative; 
    left: -50px; 
    top: -200px; 
    width: 450px; 
    height: 250px; 
    opacity: 0; 
    transition: all 0.4s; 
    z-index: -1 
} 
div a { 
    position: relative; 
    top: 210px; 
    left: 50px; 
    opacity: 0; 
} 
div:hover .link-cont { 
    opacity: 1; 
} 
a { 
    text-decoration: none; 
    color: #fff; 
} 
div:hover a { 
    opacity: 1; 
}