SVG Icon in Overlay bei Mouseover

kazuhisa

Grünschnabel
Ich möchte in einem Image Overlay per CSS eine SVG laden, die mit dem Overlay nur bei Mouseover angezeigt wird.

Die SVG könnte aus einfachen Rechtecken bestehen, die nicht extern geladen, sondern direkt im CSS stecken?

SVG:
XML:
<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
    <rect x="19" y="0" width="1" height="40"></rect>
    <rect x="0" y="19" width="40" height="1"></rect>
</svg>

HTML:
HTML:
<a class='link-class' href='image' title='description'>
    <span class='overlay'>
        <img src='image.jpg' alt='description'>
    </span>
</a>

Das Overlay umschließt das image, weil ich dem Overlay zus. zur SVG eine Hintergrundfarbe rgba(255, 255, 255, 0.3) geben möchte.

Meine Online Recherche brachte viele Möglichkeiten mit dem Laden von Font Awesome o. ä. hervor, aber leider nichts in o. g. Form. Ich hoffe ihr könnt helfen?
 

Sempervivum

Erfahrenes Mitglied
Dieses verstehe ich nicht ganz:
Die SVG könnte aus einfachen Rechtecken bestehen, die nicht extern geladen, sondern direkt im CSS stecken?
In dem SVG, das Du gepostet hast, sehe ich nur zwei Rechtecke mit einer Breite von 1px, was auf zwei Linien hinaus laufen würde.

Das Overlay umschließt das image
Möchtest Du, dass das Bild einen Rahmen bekommt? Das kannst Du relativ einfach auch mit CSS erreichen:
border - CSS: Cascading Style Sheets | MDN
 

kazuhisa

Grünschnabel
In dem SVG, das Du gepostet hast, sehe ich nur zwei Rechtecke mit einer Breite von 1px, was auf zwei Linien hinaus laufen würde.
Zwei Linien würden es auch tun, beides ändert die „Linienstärke“ über width, dass ist in Inkscape oder Designer schnell umgesetzt. Wichtig ist nur, das die Farbe (beim Rectangle der background, bei Linien die border color) änderbar ist, auch wenn #fff bei Fotos meist die erste Wahl ist.

Möchtest Du, dass das Bild einen Rahmen bekommt? Das kannst Du relativ einfach auch mit CSS erreichen:

Nein, kein Rahmen, nur das Foto mit aufgesetztem Overlay und mittig ausgerichtetem Icon. Mein erfolgloser Versuch sieht bisher so aus:

CSS:
.overlay {
  opacity: 1;
}

.overlay:hover {
  opacity: .8;
  background-color: var(--white);
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
}

.overlay-icon {
  content: "+";
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><path d="M20.5,19.5L20.5,0L19.5,0L19.5,19.5L0,19.5L0,20.5L19.5,20.5L19.5,40L20.5,40L20.5,20.5L40,20.5L40,19.5L20.5,19.5Z" style="fill:%23000000;fill-rule:nonzero;"/></svg>');
  color: white;
  font-size: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

Was fehlt ist die Verbindung vom funktionierenden Overlay zum Icon, was in meinem Versuch einmal testweise als + Glyph, und einmal als background-image angelegt ist. Wie bekomme ich das Icon nun ins .overlay bei :hover; oder ist vielleicht der Weg über content='' der bessere Weg !?
 

Sempervivum

Erfahrenes Mitglied
OK, wenn ich mit dem Code teste, sehe ich ein weißes Kreuz. Ist es das, was Du mit Icon meinst?
Du schreibst von Foto, Icon und Overlay und ich verstehe immer noch nicht, was Du vor hast.
Ein Foto und beim Hover soll das Kreuz bzw. das Icon darüber gelegt werden?
Poste doch mal zwei Bilder, ein Mal mit und ein Mal ohne Hover.
 
Zuletzt bearbeitet:

kazuhisa

Grünschnabel
Die Kombination von Overlay (opacity: .8;) und dem Icon (svg Datei) ist das Problem.

Normalzustand:
FHdhqgT.jpg


Overlay mit transparent weiß (.overlay:hover):
ZBNNFll.jpg


Wunsch: Overlay mit transparent weiß und Icon (hier manuell hinzugescribbelt):
nmLnGw3.jpg
 

Sempervivum

Erfahrenes Mitglied
OK, so hatte ich es mir auch zusammen gereimt und etwas vorgearbeitet. Dabei bin ich auf das Problem gestoßen, das Du auch wahrscheinlich meinst: Wenn das Icon innerhalb des Overlay liegt, wirkt die reduzierte Opacity auch auf das Icon und dieses ist schlecht sichtbar. Gelöst habe ich es, indem ich Icon und Overlay getrennt angelegt habe:
HTML:
    <figure>
        <img src=" images/dia0.jpg">
        <!-- Wir legen beides, die Abdeckung und das Icon, als Overlay an -->
        <div class="overlay cover">
        </div>
        <svg class="overlay icon" xmlns="http://www.w3.org/2000/svg" version="1.1">
            <path
                d="M20.5,19.5L20.5,0L19.5,0L19.5,19.5L0,19.5L0,20.5L19.5,20.5L19.5,40L20.5,40L20.5,20.5L40,20.5L40,19.5L20.5,19.5Z"
                style="fill:#ffffff;fill-rule:nonzero;"></path>
        </svg>
    </figure>
CSS:
        :root {
            --custom-white: #fff;
        }

        figure {
            margin: 0;
            position: relative;
            display: inline-block;
        }

        figure img {
            vertical-align: top;
        }

        /* Styles gemeinsam für Abdeckung und Icon: */
        .overlay {
            position: absolute;
            transition: all .3s;
            opacity: 0;
        }

        /* Styles für die Abdeckung: */
        .overlay.cover {
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-color: var(--custom-white);
        }

        /* Styles für das Icon: */
        .overlay.icon {
            opacity: 0;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            pointer-events: none;
        }

        /* Die Abdeckung wird beim Hover teildeckend: */
        .overlay.cover:hover {
            opacity: 0.3;
        }

        /* Das Icon wird beim Hover vollständig deckend: */
        .overlay.cover:hover~.overlay.icon {
            opacity: 1;
        }
Ich hoffe, das ist das, was Du dir vorgestellt hast.
 

Sempervivum

Erfahrenes Mitglied
Übrigens: Du kannst das auch mit deinem ursprünglichen Ansatz lösen wenn Du als Hintergrundfarbe einen RGBA-Wert verwendest und diesen animierst. Dann wird das Icon nicht beeinflusst.