Eu gostaria de fazer esse efeito hover da imagem desse site, mas não estou conseguindo
$('.img').on('mouseover', function(e) {
$(this).css({
'opacity': '0.5'
});
$('.hiddenDiv').css({
'display': 'block'
});
});
$('.img').on('mouseout', function(e) {
$(this).css({
'opacity': '1'
});
$('.hiddenDiv').css({
'display': 'none'
});
});
#ContCentral {
margin: 1%;
display: grid;
grid-template-rows: repeat(2, 150px);
grid-gap: 1rem; /* espaço entre as imagens */
box-sizing: border-box;
}
section > a div{
width: 100%;
}
.hiddenDiv {
display: none;
position: absolute;
width: 205.063px;
height: 77.5px;
background-color: black;
margin-top: -79.5px;
transition: 0.5s;
}
.hiddenName {
margin-top: 4%;
width: 100%;
text-align: center;
font-size: 200%;
color: white;
}
.i1 {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
.i2 {
grid-column: 3 / 4;
grid-row: 1 / 2;
}
.i3 {
grid-column: 4 / 8;
grid-row: 1 / 2;
}
.i4 {
grid-column: 8 / 10;
grid-row: 1 / 3;
}
.i5 {
grid-column: 3 / 7;
grid-row: 2 / 3;
}
.i6 {
grid-column: 7 / 8;
grid-row: 2 / 3;
}
section {
box-sizing: border-box;
border: 1px solid;
}
section>a img {
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ContCentral">
<section class="hover i1">
<a href="../PCP/catalogo.php?secao=Feminino&grupo=Vestidos">
<img class="img" src="https://rolfmodas.com.br/PCP/_fotos/716E-1.jpg" />
<div id="hover1" class="hiddenDiv">
<center><span class="hiddenName">
Vestidos
</span></center>
</div>
</a>
</section>
<section class="hover i2">
<a href="../PCP/catalogo.php?secao=Feminino&grupo=Fitness">
<img class="img" src="https://rolfmodas.com.br/PCP/_fotos/006E-1.jpg" />
<div id="hover2" class="hiddenDiv">
<center><span class="hiddenName">
Fitness
</span></center>
</div>
</a>
</section>
<section class="hover i3">
<a href="../PCP/catalogo.php?secao=Infantil">
<img class="img" src="https://rolfmodas.com.br/PCP/_banner/4-banner.png" />
<div id="hover3" class="hiddenDiv">
<center><span class="hiddenName">
Infantil
</span></center>
</div>
</a>
</section>
<section class="hover i4">
<a href="../PCP/catalogo.php?secao=Feminino&grupo=CalcaBermuda">
<img class="img" src="https://rolfmodas.com.br/PCP/_fotos/263-1.jpg" />
<div id="hover4" class="hiddenDiv">
<center><span class="hiddenName">
Calças e Bermudas
</span></center>
</div>
</a>
</section>
<section class="hover i5">
<a href="../PCP/catalogo.php?secao=Feminino">
<img class="img" src="https://rolfmodas.com.br/PCP/_banner/2-banner.png" />
<div id="hover5" class="hiddenDiv">
<center><span class="hiddenName">
Feminino
</span></center>
</div>
</a>
</section>
<section class="hover i6">
<a href="../PCP/catalogo.php?secao=Masculino">
<img class="img" src="https://rolfmodas.com.br/PCP/_fotos/2000P-1.jpg" />
<div id="hover6" class="hiddenDiv">
<center><span class="hiddenName">
Masculino
</span></center>
</div>
</a>
</section>
</div>