Hyperlink als Bild mit Mouse-Over Effekt [gelöst]

[BrainStormer]

Hallo an alle,
ich habe folgendes Problem,bzw kleines neues Projekt. Ich habe bei mir auf einer Seite Produktbilder, wenn ich dort draufklicke komme ich auf die Produktseite. Diese Produktbilder sind Hyperlinks bzw Bildlinks. Jetzt hätte ich gerne, dass es dazu noch einen Mouse-Over Effekt gibt, sich das Bild also einfach wechselt.
Ich hatte mir dabei gedacht einfach die .hyperlink_img mit einem CSS anzusprechen, so einfach geht das aber leider nicht:

.hyperlink_img.test a:hover {
    width:500px;
    background-image:url("files/.../Textur 3.jpg");
    background-repeat:no-repeat;
}

Ich hab auch schon das Forum gesucht und bin hierdrauf gestoßen, wirklich geholfen hatte mir das abernicht.

Hat jemand eine Idee wie man das umsetzen kann?

Lg

[Spooky]

Damit setzt du ja nur ein Hintergrundbild, noch dazu nur auf das a. Das Hintergrundbild wird einerseits vielleicht gar nicht angezeigt, weil du a nicht zu einem Block Level Element gemacht hast und andererseits, weil es ja vermutlich vom Bild überdeckt wird.

// sieh dir zB das hier an: https://jsfiddle.net/8f0cdpfn/

[BrainStormer]

Super danke,
ja genau das ist das was ich brauche. Ich hatte versuch das mal nachzubilden. Den HTML Teil hab ich genauso in die Seite eingefügt.
Für die CSS hatte ich dann 3 Formatdeinitionen eingerichtet ich hatte dann den Inhalt des CSS im "Eigenen Code" Bereich eingeben:

.hyperlink_img a {
    float:left;
      display:block;
      
      img {
        display:block;
      }
}

.hyperlink_img a:hover {
    background-image:url('https://placehold.it/300x200/dd0000/ffffff?text=Hintergrundbild');
    img {
    visibility:hidden;
        }
}

.ce_hyperlink:after {
    content:"";
    display:block;
    clear:both;
}

Es wird jetzt zwar das normale Bild angezeigt "Vordergrundbild", das "Hintergrundbild" jedoch nicht, hab ich da irgendwo ein Fehler in der Umsetzung?

Lg

[Spooky]

Den Code den ich verwendete habe, ist SCSS . Du musst das auf CSS übersetzen.

[BrainStormer]

Hallo danke,
ich hab jetzt gestern einige Zeit daran verbracht das in CSS umzuwandeln. Dafür habe ich folgende Formatdefinitionen erstellt:

.hyperlink_img a {
    float:left;
      display:block;
}

.hyperlink_img a img {
    display:block;
}

Beim Hovern soll die Visibility des Bildes au "hidden" gestellt werden.

.hyperlink_img a:hover img {
    visibility:hidden;
}

Hier dann nochmal das .hover1 da ja jeder Hyperlink ein anderes Bild anzeigen soll.

.hyperlink_img.hover1 a:hover {
    background-image:url("files/.../411.png");
    display:block;
}

.ce_hyperlink:after {
    content:"";
    display:block;
    clear:both;
}

Auf der Seite habe ich folgendes HTML eingegeben:

<div class="ce_hyperlink block">
  <figure class="image_container">
    <a href="#" class="hyperlink_img hover1">
      <img src="https://placehold.it/300x200?text=Vordergrundbild">
    </a>
  </figure>
</div>

Leider macht er immernoch nichts . Hast du evtl ein Tipp wo der Fehler ist? Ich will natürlich nicht das du den Code übersetzt, aber ein Wink mit dem Zaunpfahl wäre nett

[Spooky]

Warum fügst du diesen HTML Code ein? Du willst doch das Hyperlink Element von Contao benutzen, oder? Und dort wahrscheinlich dann entsprechend CSS Klassen setzen. Diese CSS Klassen werden aber natürlich auf dem .ce_hyperlink Element ausgegeben, nicht auf dem .hyperlink_img Element.

[BrainStormer]

Perfekt, das war es. Ich hab statt

.hyperlink_img[...]

einfach

.ce_hyperlink[...]

eingesetzt.
Im Artikel hab ich dann einen Hyperlink als Bild eingefügt und als Klasse hover1 eingegeben.

Falls es dann weiter noch jemand interessiert: Ich hatte dann noch das Problem das ich ein delay von 0,5s hatte zwischen den beiden Bildern. Das hab ich dann wie folgt gelöst:
Ich habe die eine Formatdefintion geändert:

.ce_hyperlink.hover1 a:hover img {
    visibility:hidden;
    transition: visibility 0s;
}

Problem gelöst. Danke!

[Andreas]

Das mit der Transition dürfte eigentlich keine Auswirkung haben, da visibility nicht animierbar ist.

Das Springen könntest du umgehen, indem du dem A sofort das Hintergrundbild zuweist, nicht erst beim Hovern.

Das block für die As kannst du sparen, da es durch das float automatisch block ist.

Tipp: Versuche auch mal ohne Visibility zu arbeiten aber mit Opacity. Das kannst du animieren.

img {
  opacity: 1;
  transition: opacity .5s ease 0s;
}
a:hover img {
  opacity: 0;
} 

[Spooky]

Das mit der Transition dürfte eigentlich keine Auswirkung haben, da visibility nicht animierbar ist.

Doch, ist es. Wird eine Transition von visibility:hidden; auf visibility:visible; ausgeführt, ändert sich der Wert sofort auf visible, sobald die Transition startet.

Wird eine Transition von visibility:visible; auf visibility:hidden; ausgeführt, bleibt der Wert auf visible, bis die Transition fertig ist. Erst am Ende wird auf hidden umgeschaltet.

[Andreas]

Ja stimmt, ist animierbar, allerdings natürlich ohne Zwischenschritte. Somit kann man das Transition hier dafür benutzen um das Umschalten zeitverzögert auszuführen.

Was mich nur wundert ist, warum er es direkt mit einer Dauer von 0 Sekunden von einem Zustand in den anderen bringt, wenn er das auch ohne Transition könnte. Und woher kommt der angebliche Delay von 0.5 Sekunden, und wie wurde der gemessen?

[Spooky]

Wahrscheinlich hat er irgendwo sowas:

a {
    transition:0.5s;
}

Um allgemein eine Transition für Hover Changes zu haben. Im Falle des Bild Hyperlinks ist das aber Kontraproduktiv, da das drüberliegende Bild mit visibility:hidden; nun erst 0.5 Sekunden später tatsächlich gehidden wird.

[BrainStormer]

Hallo,
hier hatte sich ja noch richtig was getan.
An die Fragen von Andreas: Ich hatte über den Inspektor von FF unter "Animationen" diesen Delay gesehen. Ich hab dann einfach die Jungs von Google losgeschickt und einen Code gesucht wie ich diesen weg bekomme. Da bin ich dann halt auf die Lösung oben gekomme. Wo genau diese 0.5s herkommen und wo die hinterlegt sind weiß ich nicht genau, bzw wo das definiert ist, da müsste ich die ganzen CSS mal durchsuchen.

[Andreas]

Ah, ok. Also ist das nur eine individuelle Lösung für dein Szenario, wo du eine Eigenschaft wieder überschreiben musst.