Images

Dévoiler une image en background

Réveler une image en passant avec sa souris

Copier ce script

Etape 1

Copier le script et le coller sur votre page ou projet Webflow

<script>
$(document).ready(function() {
 let $magic = $(".hover-wrapper"),
     magicWHalf = $magic.width() / 2;
 $(document).on("mousemove", function(e) {
   $magic.css({"left": e.pageX - magicWHalf, "top": e.pageY - magicWHalf});
 });
});
</script>
Copier

Etape 2

Intégrer sur Webflow en adaptant à votre projet et votre configuration

  • Créer un élément qui permettra d'afficher l'image en background et lui donner une class
  • Insérer une image en background de cette class
  • Prendre la class créer et l'insérer à la place de celle en exemple (ici hover-wrapper)