Код
<style>
.imgteaser { /* общий блок */
position: relative;
display: table;
margin: 0 auto;
border: 5px solid #ccc;
line-height: 0;
color: rgb(223,223,223);
cursor: pointer;
}
.imgteaser:after { /* "подробнее" */
content: "подробнее \bb";
position: absolute;
right: 10px;
bottom: 10px;
padding: 5px 10px;
background: rgba(17,34,51,.6);
line-height: 1.6em;
}
.imgteaser:hover:after {content: none;}
.imgteaser figcaption {display: none;}
.imgteaser:hover figcaption { /* прозрачная область */
display: block;
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
padding: 5px 10px;
background: rgba(68,85,102,.7);
font-size: 80%;
line-height: 1.3em;
}
.imgteaser:hover figcaption strong { /* заголовок */
display: block;
line-height: 2em;
font-size: 120%;
}
</style>
<figure class="imgteaser">
<img height="250" width="300" src="http://www.novickiy.ru/_ph/1/2/431002365.jpg" alt="Голландский пейзаж"/>
<figcaption><strong>Голландский пейзаж</strong><a href="http://novickiy.ru/photo/1"style="color:#fff; text-decoration:none">Перейти в галерею</a></figcaption>
</figure>