<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>