Place description in hover image [duplicate]

Question

Place description in hover image [duplicate]

Navigation

#1 by (2 votes)

0

I'd like to this hover effect from that site's image, but I'm not getting it.

$('.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><divid="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"/><divid="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"/><divid="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"/><divid="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"/><divid="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"/><divid="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"/><divid="hover6" class="hiddenDiv">
        <center><span class="hiddenName">
								Masculino
							</span></center>
      </div>
    </a>
  </section>
</div>

html jquery css

asked by anonymous 19.11.2018 / 17:49

1 answer

Read file information. txt using Python input password in css does not work

score 2 · Answer 1

Watch out for the site you're using as an example, since the <figcaption> should be used exclusively as the first or last child element of a figure (and not from a <a> tag like on the site you linked to ).

That said, you can use transitions together with :hover instead of doing this in 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>