Transition delay css for multiple images

August 23, 2022

I’m trying to add a transition-delay to the CSS but everywhere I add it is ineffective.
My CSS is:

    .imageBox {
      position: relative;
      float: left;
      transition-delay: 3s;
    }

    .imageBox .hoverImg {
      position: absolute;
      left: 0;
      top: 0;
      display: none;
    }

    .imageBox:hover .hoverImg {
      display: block;
    }

My HTML is:

    <div style="float:left">
      <div class="imageBox">
          <img src="https://cdn.discordapp.com/attachments/732623682576580719/1010327699098714282/unknown.png" height="300px" width="300px">
        <div class="hoverImg">
          <img src="https://cdn.discordapp.com/attachments/732623682576580719/1011368277613760583/Me_Purple.png">
        </div>
      </div>
    </div>

Where should my transition delay and ease go? Thank you!

>Solution :

Transition property doesn’t work on "display".
Try this:

    .imageBox {
      position: relative;
      float: left;
    }

    .imageBox .hoverImg {
      position: absolute;
      left: 0;
      top: 0;
      opacity:0;
      transition:1s;
      transition-delay: 3s;
    }

    .imageBox:hover .hoverImg {
      opacity:1;
    }

This doesn’t make the div disappear, but rather invisible. It won’t work in every scenario, but it should here.