Image reveal while hovering on text

[dhaliwallambi 0 Likes (Newbie)]

Hello Guys,

I want to know to get this effect. Many websites have these. When we hover on a piece of text, images pop-up and when we move away from text, they disapper.

Well, the major drawback for me is that I don't know the javascript at all! But I'm great at html&css.

I just want a simple effect, image pop-up and move along as we move the cursor on text. I'm sharing the websites which have these effects.

I'm including a codepen which has this effect but the problem is, when implement that javascript into my website, it has a part, this on

const image = document.querySelector('img')  

This select all the img tag and I don't even why it has an empty img tag in the beginnning of html.

 

 

It would be great, if you can help me in any way.

 

https://www.craig-reynolds.com/

https://normal.studio/en/

 

Thanks & Have a great day!

See the Pen rrpzgW by RMKNGY (@RMKNGY) on CodePen

[Yannis Yannakopoulos 39 Likes (Newbie)]

Codrops have a few demos with this effect. You can take a look at this one for example: Creating a Menu Image Animation on Hover

 

8 hours ago, dhaliwallambi said:

This select all the img tag and I don't even why it has an empty img tag in the beginnning of html.

 

In this case, the empty img tag serves as a placeholder for the effect. Notice the data image on each list item. When each item is hovered, it grabs its data-image attribute and sets it to the placeholder image.

[dhaliwallambi 0 Likes (Newbie)]

Codrops has many examples but it's way complex for me.

Can we change or assign empty img tag a class. So, that the script does not affect other img tags in html.

If we assign a class "image-reveal" to that empty img tag and add that class to the code in css, But I don't know how to make changes in JavaScript and replace the img tag with a img tag with specific class.

[Yannis Yannakopoulos 39 Likes (Newbie)]

I see. In general there are many ways of doing this, but for now i'll stick to the logic of the Codepen you included.

 

Here is a simplified fork, with only the bare minimum:

 

See the Pen BajGvxv?editors=0110 by neundex (@neundex) on CodePen

 

 

 

 

[FrancoisBeyers 0 Likes (Newbie)]

How can I achieve this in React? Thanks for any help 🙏🏼

[ZachSaucier 6,977 Likes (Superhero)]

Hey Francois and welcome to the GreenSock forums. Check out this article on React + GSAP by @Ihatetomatoes: https://ihatetomatoes.net/react-and-greensock-tutorial-for-beginners/