YumoBennyYang Posted January 14 Share Posted January 14 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
tuanphan Posted January 18 Share Posted January 18 Hi, Can you share link to page where you have problem? We can check order of all blocks easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment