Alterar elemento CSS que vem após o outro
Eu gostaria de pairara.bio
mude o fundo.pic
para verde.
Eu tentei algumas maneiras, mas não deu certo.
Eu não entendi a lógica de~
e como fazê-lo funcionar.
CÓDIGO
.executivo .pic::after {
background-color: #00845b;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
transition: .3s ease-in-out;
}
.equipe a.bio:hover ~ .pic::after {
opacity: 0.35;
}
.executivo .pic {
margin-bottom: 45px;
position: relative;
}
.executivo .pic img {
display: block;
}
<div class="executivo">
<div class="pic">
<img src="<?php echo $pic; ?>" alt="<?php echo $nome; ?>" />
</div>
<div class="title">
<h3><?php echo $nome; ?></h3>
</div>
<a class="bio" href="#">Bio+</a>
</div>