Streaming live at 10am (PST)

Hover interaction - border radius


I have a simple Link block that contains of an image and a text underneath. What I want to do is hover anywhere (either the image or the text) with the same hover effect on the image. The hover effects: border radius changed (left upper corner from 30 px to 0 px), shadow opacity changed (from 10% to 20%), a text appears over the image (see the gif)

I am able to do all these with a simple hover when working with the image (it’s actually a div with an image background). I tried to do it via Element triggers but I can’t seem to find what I need to do (change border radius of an element).

It would be also helpful it it was possible to apply all children’s hover effects when hovering the parent Link block, also dunno if that’s possible.

Could someone please help?

Thanks in advance!

can you share the read only link please?

You cannot. Unfortunately ix does not support changing border radius which is totally frustrating

edit: you may want to create a separate interaction for everything but that border radius and set simple hover on the image separately for the border radius only.

Hi, thanks for the answer.

I don’t think I understand - wouldn’t it leave the border radius untouched when hovering over the text below anyway?

I’d probably rather have the text not included in the link (only the image would be clickable) than not having the border radius changing when hovered on a clickable text.

Yes. You can try to play with margins and paddings or absolute positioning to make sure the text is inside the hover activation boundary. Or do as you proposed yourself.