Delay Hover Effect - prevent switching off overlay - html

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>

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>