Ergebnis 1 bis 13 von 13

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

  1. #1
    Contao-Nutzer
    Registriert seit
    28.03.2014.
    Beiträge
    116

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

    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:

    HTML-Code:
    .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
    Geändert von BrainStormer (29.03.2017 um 10:54 Uhr)

  2. #2
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    35.517
    Partner-ID
    10107

    Standard

    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/
    Geändert von Spooky (28.03.2017 um 10:04 Uhr)

  3. #3
    Contao-Nutzer
    Registriert seit
    28.03.2014.
    Beiträge
    116

    Standard

    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:

    HTML-Code:
    .hyperlink_img a {
        float:left;
          display:block;
          
          img {
            display:block;
          }
    }
    HTML-Code:
    .hyperlink_img a:hover {
        background-image:url('https://placehold.it/300x200/dd0000/ffffff?text=Hintergrundbild');
        img {
        visibility:hidden;
            }
    }
    HTML-Code:
    .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

  4. #4
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    35.517
    Partner-ID
    10107

    Standard

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

  5. #5
    Contao-Nutzer
    Registriert seit
    28.03.2014.
    Beiträge
    116

    Standard

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

    HTML-Code:
    .hyperlink_img a {
        float:left;
          display:block;
    }
    HTML-Code:
    .hyperlink_img a img {
        display:block;
    }
    Beim Hovern soll die Visibility des Bildes au "hidden" gestellt werden.

    HTML-Code:
    .hyperlink_img a:hover img {
        visibility:hidden;
    }
    Hier dann nochmal das .hover1 da ja jeder Hyperlink ein anderes Bild anzeigen soll.

    HTML-Code:
    .hyperlink_img.hover1 a:hover {
        background-image:url("files/.../411.png");
        display:block;
    }
    HTML-Code:
    .ce_hyperlink:after {
        content:"";
        display:block;
        clear:both;
    }
    Auf der Seite habe ich folgendes HTML eingegeben:

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

  6. #6
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    35.517
    Partner-ID
    10107

    Standard

    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.

  7. #7
    Contao-Nutzer
    Registriert seit
    28.03.2014.
    Beiträge
    116

    Standard

    Perfekt, das war es. Ich hab statt
    HTML-Code:
    .hyperlink_img[...]
    einfach
    HTML-Code:
    .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:

    HTML-Code:
    .ce_hyperlink.hover1 a:hover img {
        visibility:hidden;
        transition: visibility 0s;
    }
    Problem gelöst. Danke!
    Geändert von BrainStormer (29.03.2017 um 10:57 Uhr)

  8. #8
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.
    PHP-Code:
    img {
      
    opacity1;
      
    transitionopacity .5s ease 0s;
    }
    a:hover img {
      
    opacity0;

    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  9. #9
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    35.517
    Partner-ID
    10107

    Standard

    Zitat Zitat von Andreas Beitrag anzeigen
    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.

  10. #10
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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?
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  11. #11
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    35.517
    Partner-ID
    10107

    Standard

    Wahrscheinlich hat er irgendwo sowas:
    Code:
    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.

  12. #12
    Contao-Nutzer
    Registriert seit
    28.03.2014.
    Beiträge
    116

    Standard

    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.

  13. #13
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ah, ok. Also ist das nur eine individuelle Lösung für dein Szenario, wo du eine Eigenschaft wieder überschreiben musst.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •