Put description in image with Hover

Asked

Viewed 117 times

0

I’d like to do this Hover effect image of this site, but I’m not getting

$('.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>

html jquery css

  • Another duplicate https://answall.com/questions/111030/como-eu-fa%C3%A7o-pra-colocar-Hover-em-uma-imgem

  • Only in my question happens a problem that I want to put an independent image of the other, and the effect is different

  • I’ll test the contents of this duplicate, pardon me

  • Jeez, sorry. I left the source open and I didn’t see that it was marked as duplicate...

1 answer

2


Stay tuned to the site you’re using as an example, because the tag <figcaption> should be used exclusively as the first or last child element of a tag figure (and not from a tag <a> as on the website you linkou).

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

Browser other questions tagged html jquery css

You are not signed in. Login or sign up in order to post.