Пост (в основном) для пользователей:

» наведи курсор
ЗДЕСЬ ПРОПИСЫВАЕТЕ БОЛЬШИМИ БУКВАМИ ЗАГОЛОВОК Здесь можно поместить текст
.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;
}
</style>
<div class="blogodel">
<img border="0" height="300" width="289" src="http://3.bp.blogspot.com/-wLs2KcjtJHE/UEoM7N9KfGI/AAAAAAAABps/pTM8tF1T8Ww/s320/tatoo-html.jpg" />
<div class="more">» наведи курсор</div>
<div class="desc"><strong>ЗДЕСЬ ПРОПИСЫВАЕТЕ БОЛЬШИМИ БУКВАМИ ЗАГОЛОВОК</strong> Здесь можно поместить текст</div>
</div></center>
Там где красная маркировка, вы можете поместить свою картинку. Желтая маркировка это размеры. Зеленая цвет рамки. Если появятся вопросы, задавайте в комментариях.