Как сделать чтобы при hover на картинку она затемнялась и появлялся текст внутри нее?
Весь интернет перерыл не нашел ничего толкового. Смысл прост: при наведении мышью на картинку она должна затемняться чуть-чуть. и внутри блока-картинки появлялся текст. Прошу помочь.
В блок поместить блок, где картинка фоном, а над ним ещё блок с текстом и чёрным фоном прозрачный. При наведении на него opacity: 50%. Разумеется блок-контейнер должен быть position absolute или relative, внутренние блоки absolute.
UPD. Вот, набросал на скорую руку.
UPD. Вот, набросал на скорую руку.
Код:
<!doctype html>
<html>
<head>
<style>
.block-container {
position: relative;
float: left;
margin: 2px;
}
.block-container, .block-container div, .block-container img { width: 150px; height: 150px; }
.block-container div, .block-container img { position: absolute; }
.block-container img {z-index: 1000;}
.block-front {
z-index: 1001;
background-color: black;
transition: all 0.4s ease-in-out 0s;
opacity: 0;
color: white;
cursor: pointer;
}
.block-front:hover { opacity: .5; }
.block-front span {
display: block;
font-weight: bold;
padding: 60px 0;
text-align: center;
}
</style>
</head>
<body>
<div class="block-container">
<img src="http://cs314219.vk.me/v314219634/79b3/ted_Uf1df_4.jpg" />
<div class="block-front"><span>Any text</span></div>
</div>
<div class="block-container">
<img src="http://cs409516.vk.me/v409516519/968c/akk26-QqOnE.jpg" />
<div class="block-front"><span>Any text</span></div>
</div>
<div class="block-container">
<img src="http://cs10830.vk.me/u263906/e_a0d4c74d.jpg" />
<div class="block-front"><span>Any text</span></div>
</div>
</body>
</html>
<html>
<head>
<style>
.block-container {
position: relative;
float: left;
margin: 2px;
}
.block-container, .block-container div, .block-container img { width: 150px; height: 150px; }
.block-container div, .block-container img { position: absolute; }
.block-container img {z-index: 1000;}
.block-front {
z-index: 1001;
background-color: black;
transition: all 0.4s ease-in-out 0s;
opacity: 0;
color: white;
cursor: pointer;
}
.block-front:hover { opacity: .5; }
.block-front span {
display: block;
font-weight: bold;
padding: 60px 0;
text-align: center;
}
</style>
</head>
<body>
<div class="block-container">
<img src="http://cs314219.vk.me/v314219634/79b3/ted_Uf1df_4.jpg" />
<div class="block-front"><span>Any text</span></div>
</div>
<div class="block-container">
<img src="http://cs409516.vk.me/v409516519/968c/akk26-QqOnE.jpg" />
<div class="block-front"><span>Any text</span></div>
</div>
<div class="block-container">
<img src="http://cs10830.vk.me/u263906/e_a0d4c74d.jpg" />
<div class="block-front"><span>Any text</span></div>
</div>
</body>
</html>