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>

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>