問題懸停對圖像的影響

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