Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
dhaliwallambi

Image reveal while hovering on text

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

  • Like 4

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

 

 

 

 

  • Like 5

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×