Hallo miteinander,
ich verwende den folgenden css code:
HTML-Code:
div.image-overlay { float: left; }
div.image-overlay img { display:block; }
div.image-overlay p { position:relative; }
div.image-overlay p span { display:none; }
div.image-overlay p span div { width: 30px; }
div.image-overlay p:hover span { position:absolute; display:block; bottom:0; left:0; right:0; top:0; margin:auto; padding:40px; background:rgba(0,0,0,.5); color:#fff; }
HTML-Code:
<div class="image-overlay"><p><img src="grafics/news/1.jpg" alt="Bildbeschreibung" /><span>...</span></p></div>
</body>
Das liefert folgendes, zufriedenstellendes Ergebnis:
Test
Allerdings erfordert die Seite, dass den images ein "float: left;" zugewiesen wird, was zu Komplikationen führt. Weiß jemand, wie sich dieses Problem in den Griff bekommen lässt?
Herzlichen Dank!