Как я могу добиться эффекта зависания?

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