In this tutorial, I'll show you how to create a stunning hover effect on images using Three.js, GSAP, and the HoverEffect library. You'll learn how to integrate these resources into your web project and customize the effect to perfectly fit your design.
We will also see how to add an overlay image that will appear over the background effect. Follow these simple steps and give your website a unique touch!
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://unpkg.com/hover-effect@latest/dist/hover-effect.umd.js"></script>
<script>
var myAnimation = new hoverEffect({
parent: document.querySelector('.my-div'),
intensity: 1.6,
speedIn: 3,
speedOut: 3,
image1: 'https://infozoos.byteweb.es/wp-content/uploads/2024/06/Img23.jpg',
image2: 'https://infozoos.byteweb.es/wp-content/uploads/2024/06/Img24.jpg',
displacementImage: 'https://infozoos.byteweb.es/wp-content/uploads/2024/06/10.jpg'
});
</script>
