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 >
<img src="https://cdn.discordapp.com/attachments/732623682576580719/1010327699098714282/unknown.png" height="300px" width="300px">
<div >
<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!
CodePudding user response:
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.