<div> with blur on hover to stay blurred after unhovering - html

Question

I have two divs, one carrying the content, the other one existing for the sole purpose of having a background image set to blur on hover.
Both of them are placed in a single container, appear as they should, though the problem is that when I hover over the content div, logically (given the structure of the code I've written), the blur rule set to the background div is no longer active.
My question is how can I get it to work so that when I hover over the content div, the background stays blurred, or whether it is even achievable through pure HTML/CSS
.col-lg-6 {height: 100%; margin: auto; padding: 0; border: none}
.container {height: 100%; ; background: #333333; }
.content {position: absolute; z-index: 10;}
.bg {height: 100%;; background-image: url(bg.jpg);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;}
.bg:hover {-webkit-filter: blur(15px);}
<a href="#">
<div class="col-lg-6 col-sm-12">
<div class="container">
<div class="content">
<img src="icon.png" class="img-responsive">
<h2>Icon</h2>
</div>
<div class="bg">
</div>
</div>
</div>
</a>

Answer 1

You can check for the mouseover event and then set a class to the element, so it will stay with the "blurred" effect.
You can use jQuery for that, as below:
$(document).ready(function () {
$('.bg').on('mouseover', function() {
$(this).addClass('bg-hovered');
});
});
And the class:
.bg-hovered {-webkit-filter: blur(15px);}
See fiddle working: https://jsfiddle.net/guschnwg/bg03hb6k/

Answer 2

You need to change the :hover pseudo-class to your .container class.
Instead of this:
.bg:hover {
-webkit-filter: blur(15px);
}
Do this:
.container:hover .bg {
-webkit-filter: blur(15px);
}
This way, even if you hover the .content element, the blur will still be applied.
.container {
height: 100%;
background: #333333;
position: relative;
}
.content {
position: relative;
z-index: 10;
}
.bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(http://fillmurray.com/1000/500) no-repeat center center / cover;
transition: all 0.5s ease;
}
.container:hover .bg {
-webkit-filter: blur(15px);
}
<div class="container">
<div class="content">
<img src="http://placehold.it/50x50" class="img-responsive">
<h2>Icon</h2>
</div>
<div class="bg"></div>
</div>