WordPress-Tipp: Bilder bei Mouse-Over ändern

Update: Aus irgendwelchen Gründen funktioniert das bei WordPress 4 nicht mehr … möglicherweise ist auch ein Plugin schuld.

Eine Alternative wäre der WP Visual Slideshow Builder. Das Plugin ist kostenlos, kann wesentlich mehr, ist aber auch sehr fancy …

Update Ende …

Ich hatte vor kurzer Zeit einen Beitrag über das GIMP-Plugin Reynthesizer geschrieben, mit dem man wie auf magische Weise Objekte aus Bildern verschwinden lassen kann. Bei der Darstellung der Bilder dachte ich mir dann, dass es eigentlich schöner oder besser zu sehen wäre, wenn sich Original und bearbeitetes Foto durch das Darüberfahren mit der Maus ändern würden.

Kann sein, dass es hierfür ein Plugin gibt – ich habe nicht nachgesehen, weil es auch so ganz einfach realisieren lässt. Im Prinzip ist es ein bisschen CSS und dann die Bilder im Text-Modus von WordPress anpassen. Der notwendige CSS-Code sieht so aus:

img.nohover {
border:0
}
img.hover {
border:0;
display:none
}
a:hover img.hover {
display:inline
}
a:hover img.nohover {
display:none
}

Nun kann ich in meinem Fall mittels <a><img class="hover" alt="Manta mit Taucher" src="https://www.bitblokes.de/wp-content/uploads/2013/01/manta-mit-taucher-570x380.jpg" width="570" height="380" /><img class="nohover" alt="Manta ohne Taucher" src="https://www.bitblokes.de/wp-content/uploads/2013/01/manta-ohne-taucher-570x380.jpg" width="570" height="380" /></a> die beiden Bilder einfügen und das Ergebnis siehst Du unten. Da ist keine Magie dabei, allerdings muss man bei WordPress aufpassen. Die beiden von den <img>-Tags eingeschlossenen Bilder müssen in einer Zeile stehen. WordPress fügt sonst einen Absatz ein und dann klappt die Geschichte nicht. Auf jeden Fall kannst Du so mit wenig Aufwand eine Nachher-Vorher-Situation visualisieren.