Jump to content

CSS hover effect not working with block IDs

Recommended Posts

I'm trying to create an interaction with block IDs where a base image is split into 4 sections, and depending on which section you hover over, four different images replace the base image. 

So I have 9 blocks in total. 1 base image block, 4 alt image blocks all overlapped together with the base image block, and 4 small transparent image blocks placed on top of other images for hovering.

I have right now this code:


#block-base{ opacity: 1 }

#block-image1, #block-image2,  #block-image3, #block-image4{ opacity: 0 }

#block-section1:hover + #block-image1{ opacity: 1 }

#block-section2:hover + #block-image2{ opacity: 1 }

#block-section3:hover + #block-image3{ opacity: 1 }

#block-section4:hover + #block-image4{ opacity: 1 }


The blocks are all opacity 0 but none show up when I hover over the four sections. I also tried "~", " ", and ">" instead of "+", but none work. Can someone help me with this please? Thank you so much.

Link to comment
  • Replies 1
  • Views 372
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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.