How to use Hover in one class to change another class?

Question

Following people, I have a class and another class underneath it... but the bottom class needs to be invisible until the user hovers the mouse in the top class, so I put opacity in it:0 , and I tried to put a Hover in the top class so when the user passed the mouse in it the bottom class would be with opacity:1, but it’s not working, is it possible to do this or am I doing wrong? here are the classes, I am using the background only for browser testing.

.foto-funcionario{
background: blue;
height: 400px;

}

.contato-funcionario{
height: 75px;
background: green;
opacity: 0;

}

.foto-funcionario:hover .contato-funcionario{
opacity: 1;

}

Answer 1

As the opacity of the parent element (.foto-funcionario) is 0, all child elements will not be displayed until it is visible.

It is as if you are trying to give opacity to an element that "wears" another with opacity 0. Like an invisibility cover.

For the child element to appear, the father must have opacity: 1; also. That’s how the waterfall works.

For that you would also have to add .foto-funcionario:hover {opacity:1;} in your code.

I don’t know exactly what effect you want to achieve, but maybe it’s a good joke rgba() and/or transparent us background of each element.

Answer 2

In theory what you are doing is correct. Some error probabilities that I am seeing would occur only if you do not define a width for your Ivs (which I don’t see in your CSS) your HTML is somehow correct. It’s like this?

<div class="foto-funcionario">
    <div class="contato-funcionario">
    </div>
</div>

Try to define a width for your classes if your HTML is correct.