0

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>

4
  • Outro duplicada pt.stackoverflow.com/questions/111030/…
    – hugocsl
    Commented 19/11/2018 às 17:01
  • Só que na minha questão acontece um problema que eu quero colocar uma imagem independente da outra, e o efeito é diferente Commented 19/11/2018 às 17:02
  • Vou testar o conteúdo dessa duplicata, perdão Commented 19/11/2018 às 17:08
  • Eita, foi mal.. deixei o código aberto e não vi que tava marcada como duplicada... Commented 19/11/2018 às 17:12

1 Resposta 1

2

Fique atento ao site que você está usando como exemplo, pois a tag <figcaption> deve ser usada exclusivamente como o primeiro ou último elemento filho de uma tag figure (e não de uma tag <a> como no site que você linkou).

Dito isso, você pode usar transitions juntamente com o :hover ao invés de fazer isso em JS.

picture {
    position: relative;
}

picture > figcaption {
    position: absolute;
    bottom: 15px;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    color: #EEE;
    padding: 10px 15px;
    opacity: 0;
    transition: opacity 300ms, left 300ms;
}

picture:hover > figcaption {
    opacity: 1;
    left: 15px;
}
<picture>
  <img src="https://www.placecage.com/g/600/150">
  <figcaption>
    <span>Caption da imagem</span>
  </figcaption>
</picture>

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .