The Hover is not working. Why?

Question

The Hover is not working. Why?

Asked 7 years, 1 month ago

Viewed 173 times

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;
}

add the images as well. Try making a functional code for us to test. You can add a snippet using Ctrl+M

– fernandosavio

2018/09/21 at 18:59
It would be good if you include your HTML tb in the question. Isn’t it working in what sense? What is the problem more precisely?

– hugocsl

2018/09/21 at 19:03

3 answers

Browser other questions tagged css-hover

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

by Jonathan de Toni • **1,260** points · Answer 1 · 2018-09-21T19:14:06+00:00

Apparently, the opacity is set to 1, which is the standard for the elements. So this part of the 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!

by hugocsl • **65,517** points · Answer 2 · 2018-09-21T19:22:24+00:00

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

Summarizing to have the transition in the :hover the first state of the element 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>

by fernandosavio • **9,013** points · Answer 3 · 2018-09-21T19:23:42+00:00

I tried to simulate the HTML that you didn’t post, and I could notice that the only thing missing was you initializing the opacity of the 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>