Druckbare Version
Moin,
ich möchte eine Galerie erstellen, bei der die Vorschaubilder beim Hovern abdunkeln und einen Text (Beschreibung) zeigen. Ähnlich dieser Galerie:
https://sammlung-online.stadtmuseum....EB_0502&page=1
- wie heißt dieser Efekt (damit ich gezielt nach einer Beschreibung suchen kann)?
- kann mir jemand eventuell ein Tool dazu nennen?
- möglicherweise geht das ja auch bereits mit den Bordmitteln – wie?
Danke.
Das läßt sich letztendlich einfach mit CSS realisieren.
Wie fit bist du da?
Grob... z.B. Textlemente anlegen mit Bild + Text, den Text standardmäßig ausblenden und auf :hover (aufs Bild oder den Link) wieder einblenden. Die Positionierung (Text absolut, das ganze Element relativ, damit der Text absolut zum jeweiligen Element steht) und die Formatierung (Farben etc.) ebenfalls per CSS.
Gruß Thomas
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>
Prima, besten Dank. Da habe ich doch schon mal einen Ansatz. :D
Suche auch mal nach CSS Flip Animation