How to highlight all elements with the same css class when you hover over an element? I want to add mouse effect like Zoom In - Elementor WordPress

Question

I want to add mouse effects like ZOOM IN on each pricing table; However, I made the pricing tables manually so each row is not related to the previous one. I read that I have to do it using javascript, I gave each Elementor column a class name, for example, the number of users and dashboards under BASIC will have the same class. I tried a code and I was able to change the background color, but how can I add a zoom effect? I didn't find a way to change the height and width in a function.

Screenshot

Thank you!

Answer 1

As referenced in this answer:

https://stackoverflow.com/a/10483891/10013076

You can consider two things:

1.

.item:hover .wrapper {
    color: #fff;
    background-color: #000;
}​

.item:hover ~ .wrapper {
    color: #fff;
    background-color: #000;
}​