Skip to content

Instantly share code, notes, and snippets.

@zartgesotten
Last active June 27, 2023 15:39
Show Gist options
  • Save zartgesotten/5e127cb494892fe4275ba23a32871a15 to your computer and use it in GitHub Desktop.
Save zartgesotten/5e127cb494892fe4275ba23a32871a15 to your computer and use it in GitHub Desktop.
Instruction: Add two image modules above each other, add the class .bild-normal to the first one and the class .bild-hover to the second one... add this css and save. Boom!
/* Bildeffekt - Bildtausch bei Hover */
/* Übergeordneten container relativ positionieren */
body:not(.fl-builder-edit) .bild-normal {
position:relative;
}
/* BILD im container absolut positionieren */
body:not(.fl-builder-edit) .bild-normal img {
position:absolute;
}
/* Zweites Bild im normalzustand ausblenden */
body:not(.fl-builder-edit) .bild-hover {
opacity:0;
transition:0.3s;
}
/* Zweites Bild im Hover-Zustand einblenden */
body:not(.fl-builder-edit) .bild-hover:hover {
opacity:1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment