How to make text fade in instantly but fade out slowly in HTML/CSS?

Ah Madness 0
Viewed 34

So I have a black image with black text on it, and I'm trying to make the (colored) text appear instantly when mouse hovers over them, with a slow fade out so it creates a nice effect. Thanks in advance!

css html
2 Answers

example:

  <div class="test"> Hello </div>

    css:
    .test:hover{
color:blue;
transition-duration: 0.5s
}

.test:not(:hover)
{
transition-duration: 1s
}

hope this makes sense.
areebcodes0

Try with a css hover trick that makes inner element visible.

.wrapper:hover .text-container {

.wrapper {
  position:relative;
  height: 200px;
  width: 400px;
}
.text-container {
  position:absolute;
  display:flex;
  width:100%;
  height:100%;
  justify-content:center;
  align-items:center;
  z-index:0;
  opacity:0;
  transition:2s;
}
.wrapper:hover .text-container {
  color:red;
  opacity:1;
  z-index:2;
  transition:0s;
}
img {
  display:block;
  width:100%;
  height:100%;
}
<div class="wrapper">
  <div class="text-container">
    <p>TEXT</p>
  </div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/A_black_image.jpg/640px-A_black_image.jpg" alt="Girl in a jacket" width="500" height="600">
</div>

Play with it more, or look for some js solution for a practice. All the best!

Nikola Cvetic0
Related