我該如何實現這種懸停效果？

Question

我目前正在反向構建本網站，其他一切正常，但是，我找不到像它那樣實現照片懸停效果的方法。

http://www.lovelytemplates.com/viewdemo/Snaps

這裏是我的代碼，任何人都可以告訴我在哪裏我做錯了什麼？

img { 
 
    width: 236px; 
 
    height: 314px; 
 
} 
 
div:hover { 
 
    opacity: 0.9; 
 
    color: #fff; 
 
    background: rgba(0, 0, 0, 0.9); 
 
}

<div> 
 
    <img src="http://demo.graphpaperpress.com/snaps/files/2013/04/child-72305-480x640.jpg" alt="" />asdfasdf asd 
 
</div>

Answer 1

試試這個？我沒有看到原來的網站是如何做到的。很可能有一個更好的辦法：

img { 
 
    width: 236px; 
 
    height: 314px; 
 
    position: absolute; 
 
} 
 

 
div.overlay { 
 
    width: 236px; 
 
    height: 314px; 
 
    position: absolute; 
 
    background-color: black; 
 
    color: white; 
 
    display: none; 
 
    line-height: 314px; 
 
    font-family: Arial; 
 
    text-align: center; 
 
} 
 

 
div.container:hover div.overlay { 
 
    width: 236px; 
 
    height: 314px; 
 
    background-color: rgba(0, 0, 0, 0.8); 
 
    display: block; 
 
}

<div class="container"> 
 
    <img src="http://demo.graphpaperpress.com/snaps/files/2013/04/child-72305-480x640.jpg" alt=""> 
 
    <div class="overlay"> 
 
    Text goes here. 
 
    </div> 
 
</div>

Answer 2

您可以輕鬆地做這種方式。我用的組合：

• opacity
• translateY
• position

div { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
img { 
 
    width: 236px; 
 
    height: 314px; 
 
    opacity: .8 
 
} 
 
div:hover img, 
 
div:hover .caption { 
 
    opacity: 1; 
 
    color: #fff; 
 
    background: rgba(0, 0, 0, 0.5); 
 
} 
 

 
.caption { 
 
    position: absolute; 
 
    z-index: 999; 
 
    top: 0; bottom: 0; 
 
    right: 0; left: 0; 
 
    background: rgba(0,0,0,0.5); 
 
    opacity: 0; 
 
} 
 

 
.caption span { 
 
    top: 50%; 
 
    right: 0; left: 0; 
 
    transform: translateY(-50%); 
 
    color: #fff; 
 
    text-align: center; 
 
    display: block; 
 
    position: absolute; 
 
}

<div> 
 
    <img src="http://demo.graphpaperpress.com/snaps/files/2013/04/child-72305-480x640.jpg" alt="" /> 
 
    <div class="caption"><span>Hello World</span></div> 
 
</div>

Answer 3

嘗試一下本作懸停

完全一樣的效果

.title { 
    font-size: 8em; 
    font-weight: bold; 
    text-shadow: 7px 7px 0 rgba(0, 0, 0, 0.5); 
    text-transform: uppercase; 
    font-family: sans-serif; 
    color: #fff; 
    opacity: 0.8; 
} 

    .title :hover { 
     opacity: 1; 
    }