我目前正在反向构建本网站，其他一切正常，但是，我找不到像它那样实现照片悬停效果的方法。我该如何实现这种悬停效果？
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>试试这个？我没有看到原来的网站是如何做到的。很可能有一个更好的办法：
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>您可以轻松地做这种方式。我用的组合：
opacitytranslateYpositiondiv {
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>尝试一下本作悬停
完全一样的效果.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;
}
哇！了不起的家伙。我们同时回答......'：D' –