CSS hover effect not working with block IDs

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.

Hi,

Can you share link to page where you have problem? We can check order of all blocks easier