Share Posted July 18, 2020 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 More sharing options...
Share Posted July 19, 2020 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. 4 Link to comment Share on other sites More sharing options...
Author Share Posted July 19, 2020 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 More sharing options...
Share Posted July 19, 2020 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 8 Link to comment Share on other sites More sharing options...
Share Posted July 30, 2020 How can I achieve this in React? Thanks for any help 🙏🏼 Link to comment Share on other sites More sharing options...
Share Posted July 30, 2020 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/ 1 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now