Artikel-Hilfsmenü
Samstag, 15. Februar 2020 – aktualisiert am Donnerstag, 4. März 2021
Ein Lupensymbol, das die Vergrößerungsmöglichkeit signalisiert, als Wasserzeichen
Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.
Um Bilder auf Klick als Vollbild anzuzeigen verwende ich die Lightbox-Alternative Photoswipe. Aber wie kommt das Lupensymbol als Wasserzeichen ins Vorschaubild? CSS macht's möglich.
Das Markup
<div class="my-gallery">
<figure>
<a href="images/bild.jpg" data-size="700x1000">
<img src="images/thumb.jpg" alt="" />
</a>
<figcaption>
Bildbeschreibung
</figcaption>
</figure>
<figure>
… weiteres Bild
</figure>
</div>
Das CSS
.my-gallery figure {position: relative;}
.my-gallery figure::after {
content: "";
background-image:url(/images/mag_glass_128.png);
background-size: 100% 100%;
display: inline-block;
/* Größe des Wasserzeichens */
height: 1.2em;
width:1.2em;
/* Position */
position: absolute;
bottom: 3px;
right: 6px;
}
Diese CSS-Technik ist natürlich nicht an die Verwendung von Photoswipe gebunden. Lediglich die Elemente / Klassen, an die das ::after gebunden wird, müssen ggf. entsprechend angepasst werden.
Aber wie kommt es, dass das dunkle Bild aus dem Konzertsaal in der obigen Demo ein weißes Lupen-Icon erhält, und die helle Eisfläche des anderen Bilds ein dunkles Icon?
Ganz einfach: Das Bild ist ein transparentes .png, und enthält beide Farben. Je nach Hintergrund verschwindet scheinbar der helle oder der dunkle Anteil:
Das Icon wurde von mir erstellt, und kann ohne jegliche Einschränkung unter der MIT-Lizenz verwendet werden:
Download Icon
Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
Kommentare
Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.