I have a column with a background image set to cover and inside the column there's another div that holds the content: title, description and tags.
The content is set to display: none; and the background image is in focus.
When I hover over the background image, it blurs and the content appears.
However, the content is also getting blurred and I can't figure out how to remove the blur and bring the content into focus while keeping the background image blurred.
DEMO: https://jsfiddle.net/499hes8f/3/
The content might be a bit hard to see but it's there, just move your mouse to the top left.
.btn-dark {
padding: 20px 0;
border: 1px solid #fff;
display: block;
margin: 0 auto;
text-decoration: none!important;
margin-top: 40px;
text-align: center;
font-size: 1vw;
}
a.btn-dark:after {
display: none!important;
}
.no-padding {
padding: 0;
}
.project {
overflow: hidden;
}
.project-bg {
height: 500px;
}
.blur:hover:not(.project-content2) {
background-repeat: no-repeat;
margin: auto;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-webkit-filter: blur(10px);
filter: blur(10px);
transform: scale(1.09);
}
.blur {
-webkit-filter: blur(0px);
filter: blur(0px);
transform: scale(1);
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.project-content2 {
margin: 0 auto;
color: #fff;
padding: 75px;
}
.project .project-content,
.project .project-content2 {
display: none;
}
.project-first .project-content,
.project-first .project-content2 {
display: block;
-webkit-filter: blur(0px);
filter: blur(0px);
z-index: 99999999999999999999999999999;
}
.project:hover .project-content,
.project:hover .project-content2 {
display: block;
-webkit-animation: fadeInFromNone 1s ease-out;
-moz-animation: fadeInFromNone 1s ease-out;
-o-animation: fadeInFromNone 1s ease-out;
animation: fadeInFromNone 1s ease-out;
-webkit-filter: blur(0px);
filter: blur(0px);
z-index: 99999999999999999999999999999999;
}
@-webkit-keyframes fadeInFromNone {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
@-moz-keyframes fadeInFromNone {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
@-o-keyframes fadeInFromNone {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
@keyframes fadeInFromNone {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}<div class="col-md-6 no-padding project">
<div class="project-bg blur" style="background: url('http://i.imgur.com/0JQxkW7.jpg') center center / cover;">
<div class="project-content2">
<h2><a href="#">Through The Telescope</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed mauris nunc. Sed vel aliquet felis. Sed eget laoreet sem. Cras in sagittis felis. Aliquam sollicitudin porta est vitae volutpat. Mauris et cursus massa. Nullam ante felis, gravida
eu leo sit amet, sodales accumsan justo. Sed sit amet leo tristique, dictum mauris vitae, aliquam nibh. Curabitur a dui lectus. Ut molestie, ipsum vel lacinia auctor, odio magna pellentesque risus, vestibulum facilisis justo mi quis mi. Vivamus
semper ipsum eget tincidunt ullamcorper.</p>
<div class="tags-button hidden-xs hidden-sm">
<a href="#" class="btn btn-dark btn-lg">Tag</a>
</div>
</div>
</div>
</div>