Help with CSS :hover

[Olivia_Riggs]

Hi everyone,
I know CSS basics and have some elements on my website that grow on hover using the :hover pseudo-class. They work as they should. I’m trying to replicate that for a container with 3 containers inside of it, but for some reason the hover effect is being applied to each individual element within the main container.

This screenshot shows the container that I want to have the hover feature, which has applied the CSS class hover (and ease) that I created for the times I’ve used hover in the past. So I know I’m applying the class to the right container, but for some reason it’s not treating the container as a real box. I’ve tried putting the class in the Element tab and the Container tab, and it makes no difference either way.
This screenshot shows my :hover css code.

Here is my preview link: http://392365-ca177.preview.sitejet.io/

I’d like to make the whole green boxes under “What We Offer” grow and shrink on hover on and off. The first box only has the classes applied. The section directly underneath, “Learn and Connect” uses the hover feature on the icons. They are just icons inside of a container and they work correctly.

Can anyone tell me what am I doing wrong in this instance? Thanks!

[Giacomo]

Hi @Olivia_Riggs

I understand what you mean, and you just need to adjust the selector to get it right. As you can see in the image below, each element (e.g. headline) is encapsulated in a div (I’ve added a red border so that’s visible).

With this selector .hover div:hover { ... } the hover effect is added to every div inside the container with the class hover.

To work, you just need to customize it as follows: .hover:hover { ... }. This way you can be sure that the hover effect is only added to the container with this class.

I hope I could help you.
Best regards

[Olivia_Riggs]

Thank you so much! Fixing that solved my problem. I appreciate it!