Help With CSS Hover Effects / Pointer-Events

ROBEX · May 17

New to CSS. Basically, I have a text block over an image block. I have already added some hover effects to the image block (scale image on hover, remove overlay on hover) but I need those effects to also work when I hover over the text block (see screenshots below). Any help is much appreciated!

Note: the image also has a clickable link to another page on the website that I need to preserve as well.

Link to page: https://ray-bullfrog-j67x.squarespace.com/config/

Edited May 20 by ROBEX

tuanphan · May 19

Can you share link to this page? We can check problem easier.

ROBEX · May 20

Link to page: https://ray-bullfrog-j67x.squarespace.com/config/

@tuanphan

tuanphan · May 21

Try this CSS code (for second image: Vigorous..) you can repeat similar for other

section[data-section-id="662ab20033c1543cb5e61ae3"]:has(div#block-c595f14b94a2ab0c0b6d:hover, div#block-7864ff382074315b5be5:hover) div#block-c595f14b94a2ab0c0b6d img {
    transform: scale(1.15) !important
}

section[data-section-id="662ab20033c1543cb5e61ae3"]:has(div#block-c595f14b94a2ab0c0b6d:hover, div#block-7864ff382074315b5be5:hover) div#block-c595f14b94a2ab0c0b6d .fluidImageOverlay {
    opacity: 0;
}

ROBEX · May 21

@tuanphan That worked! Huge help. Thank you!

Help With CSS Hover Effects / Pointer-Events

Recommended Posts

ROBEX

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

tuanphan

ROBEX

tuanphan

ROBEX

Create an account or sign in to comment

News

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources