pfluegs pfluegs - 4 months ago 20
CSS Question

How to keep a background image blurred after hover when moving to child element

I have a background image that blurs when hovering over the image. However when I mouse over the other div's that are on top of the background image, the blur goes away. I understand why this happens, but I am not sure if there is a simple way to fix it. I would like to keep the blur even when I move to other divs inside the parent and only have the blur removed when leaving the parent div.

.image-fullbg {
box-sizing: border-box;
width: 100%;
height: 100%;
max-height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
z-index: -1;
background-attachment: fixed;
background-position: center center;
-webkit-transition: all 0.3s ease;
}

.image-fullbg:hover,
.image-fullbg:focus {
-webkit-filter: blur(5px)
}

Answer

You can simply use

[parent selector]:hover .image-fullbg { -webkit-filter: blur(5px); }
Comments