How can I achieve this hover effect? - html

Question

I am currently reverse building this website, everything else works ok, however,I cannot find a way to achieve the photo hover effect like it does.
http://www.lovelytemplates.com/viewdemo/Snaps
And here is my code, can anyone advise me where did I do wrong?
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

Give this a try? I didn't look at how the original site did it. Quite possibly there's a better way:
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

You can easily do it this way. I have used a combination of:
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

try this for exact same effect on hover
.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;
}