<style>
.imgteaser { /* общий блок */
  position: relative;
  display: table;
  margin: 0 auto;
  border: 10px solid #456;
  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: 110%;
}
</style>

<figure class="imgteaser">
    <img height="600" width="539" src="http://4.bp.blogspot.com/-JT5diAXNGw4/TaQPTlnr2oI/AAAAAAAABto/jqJRCIzwQOo/s600/kon.jpg" alt="конь"/>
    <figcaption><strong>ЗАГОЛОВОК</strong>прозрачная область</figcaption>
</figure>

<h2 style="color: rgb(101, 85, 69); margin-top: 2em; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; line-height: 25.6px;">&nbsp;</h2>

<figure class="imgteaser" style="position: relative; display: table; margin: 0px auto; border-width: 10px; border-color: rgb(68, 85, 102); line-height: 0; color: rgb(223, 223, 223); cursor: pointer; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 16px; text-align: start;"><img alt="CSS наложение" height="600" src="http://4.bp.blogspot.com/-JT5diAXNGw4/TaQPTlnr2oI/AAAAAAAABto/jqJRCIzwQOo/s600/kon.jpg" width="539" />
<figcaption style="position: absolute; bottom: 10px; left: 10px; right: 10px; padding: 5px 10px; font-size: 12.8px; line-height: 1.3em; background: rgba(68, 85, 102, 0.701961);"><strong style="display: block; line-height: 2em; font-size: 14.08px;">Как написать текст на изображении</strong>Этот вариант приобретает всё большую популярность и возможен благодаря наложению одного слоя на другой с помощью свойств CSS</figcaption>
</figure>