Image-Button mit Hover-Image overlay

Hallo,

ich nutze gerade die Testversion von Web Shop Pro 5 mit dem Flexresponsive-Design und suche nach einem Button, der als individuelles Bild dargestellt werden kann und beim Hovern ein anderes Bild lädt.

Vier Beispiel-Buttons findet man auf meiner Website:

http://www.cms-sounddesign.de/

Wie kann ich das in Siquando Web Shop Pro 5 umsetzen?

Über eine Rückmeldung würde ich mich sehr freuen.

Viele Grüße

Manuela

Hi Manuela,

Schaue mal auf diesen Link: https://www.aeternus.org/hope/

Das wird realisiert mit dieser CSS / HTML Code:

VG, Piotr

<style type="text/css">

/* Make the container relative */
.swap-on-hover {
 position: relative; 
 margin: 0 auto;
 max-width: 100%;
}

/* Select the image and make it absolute to the container */
.swap-on-hover img {
 position: absolute;
 top:0;
 left:0;
 overflow: hidden;
 width: 100%;
}

.swap-on-hover .swap-on-hover__front-image {
 z-index: 9999;
 transition: opacity 1.0s linear;
 cursor: pointer;
}

.swap-on-hover:hover > .swap-on-hover__front-image{
 opacity: 0;
}

</style>

<div class="swap-on-hover">
 <img class="swap-on-hover__front-image" src="../downloads/image-1.jpg"/>
 <img class="swap-on-hover__back-image" src="../downloads/image-2.jpg"/>
</div>