Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Mit CSS ein Symbol (Wasserzeichen) über ein Bild legen

Donnerstag, 21. Juli 2016

Nachtrag 24.05.2017:
Die im Folgenden beschriebene Technik habe ich durch eine einfache CSS-Angabe ersetzt: cursor: zoom-in

Dass Bilder auf Webseiten per Mausklick vergrößert werden können, zeige ich mit einem Lupensymbol in der rechten unteren Ecke des Vorschaubildes an. (Die Technik zur Vergrößerung ist nicht Themas dieses Beitrags. Ich mache das mit Fancybox oder Photoswipe).

Demobild
Hinweis: Dieses Demobild wird bei Mausklick nicht vergrößert. Es soll lediglich das eingeblendete Lupensymbol gezeigt werden.

Diese Lupensymbol könnte man natürlich mit einem Bildbearbeitungsprogramm einfügen.
Eleganter geht es aber mit HTML, und einigen Zeilen CSS.

Das Lupensymbol wird dazu im HTML als img mit der Klasse "after" eingesetzt, und beide (Vorschaubild und Lupensymbol) in ein Element (z. B. span) mit der Klasse "over" eingeschlossen. Der HTML Code sieht dann — vereinfacht, ohne den Code zur Anzeige des vergrößerten Bildes — so aus:

<span class="over">
<img src="pfad_zum_Vorschaubild.jpg" alt="Demobild">
<img span class="after" src="pfad_zum_Lupensymbol.png" alt="" />
</span>

Und das CSS dazu:

.over {
position: relative;
display:inline-block;
}
.over .after {
position: absolute;
bottom: 5px;
right: 5px;
}

Eventuell möchte man das Lupensymbol auch noch per CSS stylen:

img.after {width:20px height:auto;opacity:.8; …}



2 Kommentare

  1. Super. Ich werde meine Fotos auf diese Weise rechts unten mit einem Logo versehen. Hat nur den Nachteil, dass es dann nach dem Kopieren ohne Logo dasteht.

    Kommentar von dliste — Donnerstag, 4. August 2016 - 10:46 Uhr

  2. Ein Logo (Wasserzeichen) so einbinden, dass das Bild MIT Wasserzeichen im Netz steht, kann man z. B. mit https://www.sitepoint.com/watermark-images-php/
    Eingesetzt wird diese Technik u. a. auf http://fritz-weisshart.de/meg_men/

    Kommentar von Fritz — Donnerstag, 4. August 2016 - 12:27 Uhr

Einen Kommentar abgeben

Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu &lt;).


(notwendig)

(notwendig)

Spamschutz:
Je nach Inhalt wird Ihr Kommentar eventuell nicht sofort angezeigt, sondern muss manuell freigeschaltet werden.

Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE