SVG Icon in Overlay bei Mouseover

[kazuhisa]

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:

<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:

<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]

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]

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:

.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]

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.

 

[kazuhisa]

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

Normalzustand:

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

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

 

[Sempervivum]

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:

    <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>

        :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.

 

[kazuhisa]

wow, in diese Richtung hatte ich nicht gedacht. Danke!

 

[Sempervivum]

Ü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.