Overlay & Hover Query (Nested Elements)

Design help Animations & Interactions
1

Hi All,

I have a problem with an interaction to do with a simple overlay and an appearing paragraph. I would like it so when you hover over the image, the overlay disappears and the paragraph appears at the bottom. It works when I don’t tick ‘Limit to Nested Elements’ but I have 4 of the same thing on the page and I don’t want the interaction to affect all of them at the same time. It is hard to explain on here so it maybe useful to look at the link below:

http://cliftonville-hotel.webflow.io/speciality-breaks

Preview: https://preview.webflow.com/preview/cliftonville-hotel?preview=04ca61e895bb747dc689134f9bd8f1c5

Thanks
(@Sabanna I’ve previously put this up and thought I’d solved it but I hadn’t!)

2

Well…

You changed structure of your overlays and there is the reason why your interaction doesn’t work anymore

Interaction applied to “Special Overlay”. But “Special Heading” and “Special Circle Paragraph” are not its nested elements, they are nested inside other div - “Special Para Div”.

You could get rid of Special Para Div and nest img and texts in special heading.

3

I had to change it because I have another page on the website (http://cliftonville-hotel.webflow.io/6-hidden-gems-in-norfolk) where the interaction is working. So I copied this over to (http://cliftonville-hotel.webflow.io/speciality-breaks) only to find that some of the styles would have to be different, therefore, if I changed anything on (http://cliftonville-hotel.webflow.io/speciality-breaks) it would also change on (http://cliftonville-hotel.webflow.io/6-hidden-gems-in-norfolk).

The only reason why the interactions were working however is because each element has its own separate class and separate interaction. A very long winded story :astonished:

Anyway, I have deleted Special Para Div, how can I nest the img and text in Special Heading @sabanna?
Thanks

4

All elements INSIDE the div will be nested to div. In the same time, these elements are siblings to each other. :wink:

5

“nested to div”? Sorry, i’m not sure if i understand that. Here it is at the moment.

6

NESTED means “sitting inside”, SIBLINGS means sitting next to each other.

So now they are sibling elements. If you will put image and texts INSIDE the div (special overlay) they will become nested elements.

7

You are a diamond @sabanna, thank you. :grin:

1 Like
8

LOL :smiley: Glad I could help :wink:

9

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.