Sonnenuhr Fabrikgut Hammer (PS)

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

Sonnenuhr Fabrikgut Hammer (PS)
Sonnenuhr Fabrikgut Hammer

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

Card Back Card Front Sonnenuhr Fabrikgut Hammer (PS)
Change image on mouseover
Markiert in:        

Schreibe einen Kommentar

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

Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu erm√∂glichen. Wenn du diese Website ohne √Ąnderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erkl√§rst du sich damit einverstanden.

Schließen