Jump to content
Search Community
dhaliwallambi test
Moderator Tag

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

Link to comment
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
Link to comment
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.

Link to comment
Share on other sites

  • 2 weeks later...

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.
×
×
  • Create New...