html - Delay Hover Effect - prevent switching off overlay

Question

I created a hover effect that is blurring out a picture and a text-description appears.

Now as soon as I hover above the description, I dont hover the image and the effect is failing, which I would like to prevent.

I assume that if I could target the hovered - version of the description, I could make it set sort of itself to be visible, but I am not sure about this.

Any other ideas how I can create this?

.flexbox{
position: relative;
display: flex;
height: 70vh;
flex-direction: row;
width: 90%;
margin-left: 5%;
max-height: 80vh;

}

.container{
  width: 100%;
  max-height: inherit;
  padding: 0;
  margin: 1%;
  display:block;
  text-align: center;
}

.image-category{
  width: 100%;
  object-fit: cover;
  height: 100%;
  opacity: 0.95;
  max-height: inherit;
  overflow: hidden;
}

.image-description{
padding: 10px;
transform: translateY(-30vh);
opacity: 0;
z-index: -1;
font-size: 20px;
}

.image-category:hover{
  filter: blur(2px);
}

.image-category:hover ~ .image-description{
  opacity: 100;
  z-index: 2;
}

.description{
font-size: 1.25em;
background: rgba(255, 255, 255, 0.7);
}

.claim{

padding: 1vh 0 1vh 0;
width: 100%;
text-align: center;
}

Delay Hover
    <div class="flexbox" id="flex">

      <div class="container" id="box1">
        <a class="image-category" href="https://amh-solingen.de/scheren.html">
        <img class="image-category" id="product3" src="/images/Schere.jpg">
        </a>
        <div class="image-description">
          <p class="description">Haushalts- und Friseurscheren</p>
        </div>
      </div>

      <div class="container" id="box2">
        <a class="image-category" href="https://amh-solingen.de/haushaltsmesser.html">
        <img class="image-category" id="product2" src="/images/Hero.png">
        </a>
        <div class="image-description">
          <p class="description">Aktuelle Auswahl an Küchenmessern</p>
        </div>
      </div>

      <div class="container" id="box3">
        <a class="image-category" href="https://amh-solingen.de/klingen.html">
        <img class="image-category" id="product3" src="/images/Klinge_7.jpg">
        </a>
        <div class="image-description">
          <p class="description">Klingen für Haushaltsmesser</p>
        </div>

      </div>
    </div>

question from:https://stackoverflow.com/questions/65868252/delay-hover-effect-prevent-switching-off-overlay

Answer 1

use this code:

.flexbox{
position: relative;
display: flex;
height: 70vh;
flex-direction: row;
width: 90%;
margin-left: 5%;
max-height: 80vh;

}

.container{
  width: 100%;
  max-height: inherit;
  padding: 0;
  margin: 1%;
  display:block;
  text-align: center;
}

.image-category{
  width: 100%;
  object-fit: cover;
  height: 100%;
  opacity: 0.95;
  max-height: inherit;
  overflow: hidden;
}

.image-description{
padding: 10px;
transform: translateY(-30vh);
opacity: 0;
z-index: -1;
font-size: 20px;
}

.container:hover .image-category{
  filter: blur(2px);
}

.container:hover .image-description{
  opacity: 100;
  z-index: 2;
}

.description{
font-size: 1.25em;
background: rgba(255, 255, 255, 0.7);
}

.claim{

padding: 1vh 0 1vh 0;
width: 100%;
text-align: center;
}

Delay Hover
    <div class="flexbox" id="flex">

      <div class="container" id="box1">
        <a class="image-category" href="https://amh-solingen.de/scheren.html">
        <img class="image-category" id="product3" src="/images/Schere.jpg">
        </a>
        <div class="image-description">
          <p class="description">Haushalts- und Friseurscheren</p>
        </div>
      </div>

      <div class="container" id="box2">
        <a class="image-category" href="https://amh-solingen.de/haushaltsmesser.html">
        <img class="image-category" id="product2" src="/images/Hero.png">
        </a>
        <div class="image-description">
          <p class="description">Aktuelle Auswahl an Küchenmessern</p>
        </div>
      </div>

      <div class="container" id="box3">
        <a class="image-category" href="https://amh-solingen.de/klingen.html">
        <img class="image-category" id="product3" src="/images/Klinge_7.jpg">
        </a>
        <div class="image-description">
          <p class="description">Klingen für Haushaltsmesser</p>
        </div>

      </div>
    </div>