Jump to content

I need help writing a code to get specific images to hover

Recommended Posts

I'm looking to create an opacity hover effect on images that will include a click through link.

I want to do it for every image on a specific page. It is not a gallery, but I want each image to have the same effect.

The specific page is www.austenjohnson.com/videography

I want all of the images under my portfolio to make it clear that they are links to videos, I don't want people to think they are still images.



Link to comment
  • Replies 1
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

I've found an article that guides you on adding an overlay on image hover. Check it out here: https://support.squarespace.com/hc/en-us/articles/205826048-Creating-hover-effects-for-your-images


Achieving an overlay hover effect can be done with CSS code.

div#block-yui_3_17_2_1_1696487530512_47089 {
   opacity:0 !important;
   transition: opacity 1s;
div#block-yui_3_17_2_1_1696487530512_47089:hover {
   opacity:1 !important;
   transition: opacity 1s;


Hover on Image.gif

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.