estou criando meu portfólio e estou com dificuldade em deixar um efeito overlay individual para cada projeto que coloquei na seção de projetos.
Vou colar aqui a seção em html e css e o problema ocorre no " .overlap:hover .overlap { " , quando passo o mouse por cima de cada projeto.
Obs: Na parte do hover, quando troco ".overlap:hover .overlap {" por "#projetos:hover .overlap {" o efeito funciona, mas funciona no momento que passo o mouse por cima da seção e ele ativa o hover dos 3 projetos ao mesmo tempo.
Queria encontrar o que estou fazendo de errado para essas class="overlapinserir a descrição da imagem aqui" não ativarem individualmente.
Agradeço desde já pela atenção de vocês!
<!-- projetos -->
<section id="projetos">
<div class="projetos-texto">
<p>Portfólio</p>
<h2 class="preta">Meus <span>projetos</span></h2>
</div>
<div class="projetos-todas-imgs">
<div class="row">
<img src="./imgs/projetos.avif" alt="" />
<div class="overlap">
<h5>Game Secret Word</h5>
<p>
Jogo online de tentativa e erros para acertar palavras aleatórias.
</p>
<a href="#"
><i class="fa-solid fa-arrow-up-right-from-square"></i
></a>
</div>
</div>
<div class="row">
<img src="./imgs/projetos.avif" alt="" />
<div class="overlap">
<h5>YelpCamp</h5>
<p>
Plataforma online de cadastramento e avaliações de acampamentos.
</p>
<a href="#"
><i class="fa-solid fa-arrow-up-right-from-square"></i
></a>
</div>
</div>
<div class="row">
<img src="./imgs/projetos.avif" alt="" />
<div class="overlap">
<h5>Museum of Candy</h5>
<p>Website de um museu de doces.</p>
<a href="#"
><i class="fa-solid fa-arrow-up-right-from-square"></i
></a>
</div>
</div>
</div>
</section>
#projetos {
height: 100vh;
width: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #0c0003;
font-family: "Catamaran", sans-serif;
}
/* .row {
position: relative;
overflow: hidden;
cursor: pointer;
} */
/* ------------------------------- */
/* texto 1 e 2 */
#projetos > h2 {
color: white;
}
.projetos-texto {
height: 20vh;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* ------------------------------- */
/* imagens */
.projetos-todas-imgs {
display: flex;
gap: 1em;
color: white;
}
.row {
position: relative;
overflow: hidden;
cursor: pointer;
}
#projetos img {
height: 40vh;
width: auto;
display: block;
transition: transform 0.5s;
}
/* ------------------------------- */
/* texto em overlap */
.overlap {
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.1), #e30022);
position: absolute;
left: 0;
bottom: 0;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 40px;
transition: height 0.5s;
}
.overlap h5 {
font-size: 20px;
font-weight: 600;
margin-bottom: 15px;
}
.overlap p {
color: rgb(236, 235, 235);
font-size: 1rem;
line-height: 1.8;
}
.overlap i {
color: #e30022;
margin-top: 20px;
font-size: 20px;
background: white;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.fa-solid {
color: #e30022;
}
.row:hover img {
transform: scale(1.1);
}
.overlap:hover .overlap {
height: 100%;
}