Hallo Zille
Schau mal hier: https://jsfiddle.net/fteyakLn/
Noch mal zusammen gefasst:
HTML-Code:
<div class="ce_image first block">
<a href="/">
<figure class="image_container">
<img src="/" alt="" width="200" height="54">
<figcaption class="caption">Untertitel</figcaption>
</figure>
</a>
</div>
<style type="text/css">
.ce_image * { box-sizing: border-box; }
.ce_image { position: relative; text-align: center; }
.ce_image figcaption { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, 0.8); padding: 5px; color: #ffffff; opacity: 0; }
.ce_image:hover figcaption { opacity: 1; }
/* Transition-Effekt? */
.ce_image * { transition: all 0.3s linear;}
</style>
Lesezeichen