Делал для себя и вот решил поделиться с вами данным произведением, при наведении курсора на картинку появляется блок, в который вы можете вставить например кнопки соц сетей или просто текст.
Если кто знает как работать со стилями CSS то можете настроить под себя. А пока смотрим демо работы данного кода
CSSКод
.gde31rudel {
overflow: hidden;
position: relative;
display: inline-block;
}
.gde31rudel .desc {
display: none;
}
.gde31rudel:hover .desc {
background-color: #fff;
display: block;
margin: 0;
color: #ff0000;
font-size: 12px;
padding: 10px;
filter: alpha(opacity=75);
opacity: .75;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=75)';
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
}
HTMLКод
<div class="gde31rudel">
<img border="0" height="300" width="300" src="http://gde31.ru/images/Vykusi.jpg" />
<div class="desc">Здесь можно поместить текст или кнопки соц сетей</div>
</div>
