The hover is not working. Because? [closed]

Question

The hover is not working. Because? [closed]

Navigation

#1 by (2 votes)
#2 by (2 votes)
#3 by (2 votes)

0

@charset "utf-8";
body {
  background-color: white;
  color: rgba(0, 0, 0, 1);
}

p {
  text-align: justify;
  text-indent: 50px;
}


/* Formatação de imagens com legendas */

figure.foto-legenda {
  position: relative;
  border: 8px solid white;
  box-shadow: 1px 1px 4px black;
}

figure.foto-legenda img {
  width: 100%;
  height: 100%;
}

figure.foto-legenda figcaption {
  position: absolute;
  top: 0px;
  background-color: rgba(0, 0, 0, .4);
  color: white;
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  transition: opacity 1s;
}

figure.foto-legenda:hover figcaption {
  opacity: 1;
}

css-hover

asked by anonymous 21.09.2018 / 20:57

3 answers

Error in Java when creating private class Why am I having problems with 'scanf' in C?

score 2 · Answer 1

If you want the element to transition from opacity 0 to 1 first you have to declare it with opacity:0 in class figure.foto-legenda figcaption . And when you do :hover the opacity transition will happen going to opacity:1 in class figure.foto-legenda:hover figcaption .

In short, to have the transition in :hover the first element state must be opacity:0 , I left the comment in the code.

See working in the example:

@charset "utf-8";

body {
  background-color: white;
  color: rgba(0, 0, 0, 1);
}
p{
  text-align: justify;
  text-indent: 50px;

}

/* Formatação de imagens com legendas */

figure.foto-legenda{
  position: relative;
  border: 8px solid white;
  box-shadow: 1px 1px 4px black;

}

figure.foto-legenda img{
  width: 100%;
  height: 100%;
}

figure.foto-legenda figcaption{
  position: absolute;
  top: 0px;
  background-color: rgba(0,0,0,.4);
  color: white;
  width: 100%;
  height:100%;
  padding: 10px;
  box-sizing: border-box;
  transition: opacity 1s;
  opacity: 0; /* primeir vc seta a opacidade como 0, pois o padrão é 1 */
}
figure.foto-legenda:hover figcaption
{
  opacity: 1;
}

<figure class="foto-legenda ">
  <p>Lorem, ipsum dolor.</p>
  <img src="https://unsplash.it/100/100"alt="">
  <figcaption>Miniatura da torre Eiffel no Parque Mini-France</figcaption>
</figure>

score 2 · Answer 2

Apparently, the opacity is set to 1, which is the default for the elements. So in this snippet of code:

figure.foto-legenda figcaption{
        position: absolute;
        top: 0px;
        background-color: rgba(0,0,0,.4);
        color: white;
        width: 100%;
        height:100%;
        padding: 10px;
        box-sizing: border-box;
        transition: opacity 1s;
        opacity: 0; //deixando com opacidade 0.
}

If you implement an opacity below 1, it would probably have some effect!

score 2 · Answer 3

I tried to simulate the HTML that you did not post, and I could see that the only thing missing was you initializing the opacity element with:

opacity: 0;

/* Formatação de imagens com legendas */

figure.foto-legenda {
    position: relative;
    border: 8px solid white;
    box-shadow: 1px 1px 4px black;
}

figure.foto-legenda img {
    width: 100%;
    height: 100%;
}

figure.foto-legenda figcaption {
    position: absolute;
    top: 0px;
    background-color: rgba(0,0,0,.4);
    color: white;
    width: 100%;
    height:100%;
    padding: 10px;
    box-sizing: border-box;
    transition: opacity 1s;
    opacity: 0;  /* unica modificação */
}

figure.foto-legenda:hover figcaption {
    opacity: 1;
}

<figure class="foto-legenda">
  <img src="https://www.placecage.com/300/80">
  <figcaption>Oh Nick...</figcaption>
</figure>