Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 17.08.2013, 19:10
Philidor Philidor ist offline
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.09.2011
Beiträge: 41
Philidor befindet sich auf einem aufstrebenden Ast
Standard Tooltip Problematik mit den Bildern

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!
Mit Zitat antworten
Sponsored Links