Image hover formatted text
HTML
<center>
<div class="blogodel">
<img src="http://3.bp.blogspot.com/-wLs2KcjtJHE/UEoM7N9KfGI/AAAAAAAABps/pTM8tF1T8Ww/s320/tatoo-html.jpg" />
<div class="more">» наведи курсор</div>
<div class="desc"><blockquote>ЗДЕСЬ ПРОПИСЫВАЕТЕ БОЛЬШИМИ БУКВАМИ ЗАГОЛОВОК</blockquote> Здесь можно поместить текст</div>
</div>
</center>
CSS
.blogodel {
overflow: hidden;
position: relative;
display: inline-block;
}
.blogodel:hover {cursor: pointer;}
.blogodel img {
background-color: #459;
border: none;
margin: 0;
padding: 10px;
}
.blogodel .more {
background-color: #123;
color: #FFF;
font-size: 14px;
padding: 5px 10px;
filter:alpha(opacity=65);
opacity:.65;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=65)';
position: absolute;
right: 10px; bottom: 10px;
}
.blogodel:hover .more {display: none;}
.blogodel .desc {display: none;}
.blogodel:hover .desc {
background-color:#345;
display: block;
margin: 0;
color: #FFF;
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;
}
.blogodel:hover .desc strong {
display: block;
font-size: 14px;
line-height: 1em;
}
