Wenn man sich selbst so eine Aufgabe stellt und kein ausgebildeter Webentwickler ist, der das t√§glich als Broterwerb macht, dann ist das erst mal gar nicht so trivial. Zumindest galt das f√ľr mich. Das Plugin Twenty20 und den RoyalSlider habe ich schon sehr lange und damit konnte ich relativ schnell einen ersten Effekt erzielen. Aber es ist kein wirklicher „change on mouseover“, weil man entweder den Schieber bet√§tigen muss, oder beim RoyalSlider mit Klick den Wechsel initiieren muss. Aber wie immer ist die Suchmaschine in der Lage entsprechende Vorlagen im Web zu finden. Das ist dann meist ein guter Startpunkt und mit weiteren Suchergebnissen n√§hert man sich dann dem gew√ľnschten Ergebnis an. Hier sind nun meine Varianten.

Mit Plugin Twenty20

Sonnenuhr Fabrikgut Hammer (PS)Sonnenuhr Fabrikgut Hammer (PS)

Mit Plugin Royal Slider

Mit HTML/CSS

Mit dieser Anleitung habe ich begonnen. Der HTML-Code muss im Texteditor eingef√ľgt werden und muss ohne Umbruch in einer Zeile stehen sonst wird die Seite zerschossen. Der √úbergang im Bild ist aber hart, also habe ich nach einer Animation gesucht. Erst mit den Stichw√∂rtern „css transition background img“ wurde ich dann bei Stackoverflow f√ľndig (Antwort 35). Das in jsfiddle gezeigte Beispiel war dann meine zweite Vorlage, die ich aber noch anpassen musste. Die <div>s in der Vorlage haben wieder die Seite zerschossen, weil ja andere <div>s auch noch vorhanden waren. Also habe ich die Klassen vom ersten Beispiel verwendet (.card). Dann war auch bei der Animation immer noch ein helles Aufblinken eines vermutlich leeren Bildes zu sehen (z-Index hatte ich schon gel√∂scht), das ich erst durch einen zweiten transition-Block im :hover Teil bereinigen konnte. Jetzt kann ich den HTML-Code bei beliebigen Gelegenheiten wieder verwenden. Der CSS-Code steht in der style.css Datei meines Child-Themes und bleibt dabei unver√§ndert.

Hier ist der HTML-Code:

<div class="card"><img src="https://foto-aktiv.meine-art-zu-sehen.de/wp-content/uploads/2019/03/02_©-W.Kleinoeder_Sonnenuhr-Fabrikgut-Hammer_01445.jpg" alt="Card Back"><img class="img-top" src="https://foto-aktiv.meine-art-zu-sehen.de/wp-content/uploads/2019/03/01_©-W.Kleinoeder_Sonnenuhr-Fabrikgut-Hammer-PS_2.jpg" alt="Card Front"></div>

Hier ist der CSS-Code:

.card {
    position: relative;
    width: 99.99%;
    height: auto;
}
.card .img-top {
    display: block;
    width: 99.99%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    /* transitions */
    -webkit-transition: all .9s ease-in-out;
       -moz-transition: all .9s ease-in-out;
        -ms-transition: all .9s ease-in-out;
         -o-transition: all .9s ease-in-out;
            transition: all .9s ease-in-out;
}
/*     solution 1: css3 solution, it depends of <img>'s order */

.card > img:nth-child(1){ /* first <img> child of <div> */
    filter: alpha(opacity=100); /* IE stuff */
    opacity: 1;
}
.card > img:nth-child(2){ /* second <img> child of <div> */
    filter: alpha(opacity=0); /* IE stuff */
    opacity: 0;
}
/* hover */
.card:hover > img:nth-child(1){ 
    filter: alpha(opacity=0);
    opacity: 0;
    /* transitions */
    -webkit-transition: all .9s ease-in-out;
       -moz-transition: all .9s ease-in-out;
        -ms-transition: all .9s ease-in-out;
         -o-transition: all .9s ease-in-out;
            transition: all .9s ease-in-out;
}
.card:hover > img:nth-child(2){ 
    filter: alpha(opacity=100);
    opacity: 1;
}

Und so sieht das Ergebnis aus

Funktioniert leider nicht mehr, da ich die Dom√§ne mit den Plugins „WebP Express“ und „W3 Total Cache“ optimiert habe. Da werden Klassen eingef√ľgt, die die Bilder bereits vorab laden und das sieht dann nicht mehr so aus wie erwartet. Muss ich noch mehr dazu lernen, bis es wieder so funktioniert wie vorher.

Card Back Card Front Sonnenuhr Fabrikgut Hammer (PS)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.