Jump to content

How to create a interactive graphic

Go to solution Solved by creedon,

Recommended Posts

Hello, 

Is it possible to make an interactive graphic on squarespace where if you hover the cursor over different sections of the image, that section will move (either expand or shift) and display a text box? This is done on many websites, but I do not know if it can be done on Squarespace. Please let me know if/how this can be done. I have the design ready. I appreciate any help, thanks!

Link to comment
  • Solution

To achieve something like you describe yes. Whether we can get you the exact effect you want is hard to tell because we don't have any examples of the effect nor the image you want to use to reveal text.

Some simple examples to show the beginning of such an effect with classic and fluid editors.

 

I used a scale effect as that is dead simple to work with. The transitions you describe would be harder to implement, I think.

It might also be possible to adapt a responsive image map to an effect like the one you describe. Not sure on this one as I've never done it. I think the image transition effect would not be possible. But I think a number of text reveal effects could be done.

Although the following thread is not about the exact effect you want is may be a starting place for some code.

 

There was an image flip text reveal effect talked about some time back. Again not specific to your effect but it shows that image/text effects are possible on SS.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.