Hover parent and child

Design help Animations & Interactions
1

Hello, I’m new here. How does the parent element does not change the child? I created a hover on the parent element but I do not want it to affect the child. I want to remove the opacity of the “gallery image” element without affecting the text, to improve the contract.

Thanks

Here is my public share link: LINK
(how to access public share link)

2

Hi @Raphael_Tadeu

Welcome to the community! :v:

If you alter a parent, it will affect it’s child. Think of it kind of like real life… the parent is the boss, it tells the children what to do. To change it, make one parent element to wrap the siblings in, and give one sibling an opacity setting. The other sibling will not be affected by this.

This can seem overwhelming, but as you’re new to Webflow, I would recommend watching throuhg some University videos, this one in particular…

Hope that helps! :smiley:

1 Like
3

Is it possible get more clarification on this? I’d like to have a hover effect on my home page gallery images (you can see what I mean from my read only link below - the top right image has a greyscale effect applied on hover but the others do not).

My issue is that the hover effect is also affecting the dynamic popup model that’s contained within. How can I implement the greyscale hover effect on the parent without it having any effect on its child elements?

Thanks in advance for any help! Here’s my link: https://preview.webflow.com/preview/brendan-cole-photography?utm_medium=preview_link&utm_source=designer&utm_content=brendan-cole-photography&preview=51eef4b7042919de6fd9d6f643a3df79&mode=preview

4

Hi @BrendanColeCreative
Applying a greyscale effect on an element when it hovers will also affect the children inside of it as you have found out. The short answer is to make these elements siblings, by wrapping them in a div together. They will no longer have an effect on each other.

Hope that helps

5

Thanks for getting back to me @magicmark - I guess what I’m not understanding is how to actually wrap them together in a div block?

When I try to add a div element in it tells me I’m not able to add divs into columns. The layout has been columnized to facilitate greater responsibility (I’ve tried a lot of other stuff but this is the only way I’ve gotten it to work with the dynamic modals).

6

You only need one collection list that will contain info about each person, and you can display it dynamically. Right now you have a collection list for each image, which is doing the opposite of what the CMS is intended for.

With a collection list, you can add content, and you only need to design it once. If you have a collection list with 20 items, those items will all behave the same way, so if you put a button in one, it will show on all of them, unless you use a filter to stop that happening with certain conditions.