Image Hover Effects

Gooey Image Hover Effects with Three.js


Image Hover Effects with Three.js

In This Article, we discuss how to create Gooey Image hover effects with threejs. Image hover effects are used to make hover image effects more efficient with three.js.

In this article, we will use three.js to create efficient gooey texture images that we’ll use to reveal other images when hovering one.

Hover Effects
Hover Effects

You can tap on a picture and it will grow to a bigger size while some other substance appears. We’ll go over the most interesting part of the impact with the goal that you get a comprehension of how it functions and how to make your own hover images.

Now we need to start making some changes but first, we need to put the images in the HTML. It will be very simple to deal with resizing our scene after we set up the underlying position and measurement in HTML/CSS as opposed to situating everything in JavaScript. Also, the styling part ought to be just made with CSS, not JavaScript. For instance, if our picture has a proportion of 16:9 on the work area however a 4:3 proportion on portable, we simply need to deal with this utilizing CSS. JavaScript will just get new qualities and do its stuff.

Example Code of image Hover Effects

HTML Code

// index.html

<section class=”container”>
<article class=”tile”>
<figure class=”tile__figure”>
<img data-src=”path/to/my/image.jpg” data-hover=”path/to/my/hover-image.jpg” class=”tile__image” alt=”My image” width=”400″ height=”300″ />
</figure>
</article>
</section>

<canvas id=”stage”></canvas>

CSS Code

// style.css

.container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
z-index: 10;
}

.tile {
width: 35vw;
flex: 0 0 auto;
}

.tile__image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}

canvas {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100vh;
z-index: 9;
}

For the above code we have create a single image you can see in the demo section.

 

Leave a Reply

Your email address will not be published. Required fields are marked *