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

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.