Pierre Myx Pierre Myx - 3 months ago 44
CSS Question

Css blur on background image :hover but not on text

Ex : https://jsfiddle.net/q4871w6L/



.article-image {
height: 150px;
width: 238px;
-webkit-filter: grayscale(0) blur(0);
filter: grayscale(0) blur(0);
transition: .4s ease-in-out;
}
.article-image:hover {
-webkit-filter: grayscale(100%) blur(2px);
filter: grayscale(100%) blur(2px);
transition: .4s ease-in-out;
}
.ar-image {
position: relative;
width: 238px;
height: 150px;
}
.article-image > p {
display: none;
}
.article-image:hover > p {
position: absolute;
top: 40%;
display: block;
color: #ffffff;
font-size: 16px;
font-weight: bold;
width: 100%;
height: 100%;
text-align: center;
transition: .4s ease-in-out;
}

<div class="ar-image">
<div style="background: url('http://maximumwallhd.com/wp-content/uploads/2015/06/fonds-ecran-plage-palmier-12-660x330.jpg')" class="article-image">
<p>Lire plus</p>
</div>
</div>





I'm trying to blur the background when hovering but not the text on the image.
How can I blur the background image without blurring the text on the image ?

Thank

Answer

You can't blur a background image but you can blur elements or pseudo-elements.

Use the image as a background (so it's still in the CSS) of a positioned pseudo-element.

.article-image {
  height: 150px;
  width: 238px;
}
.article-image:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-image: url(http://maximumwallhd.com/wp-content/uploads/2015/06/fonds-ecran-plage-palmier-12-660x330.jpg);
  -webkit-filter: grayscale(0) blur(0);
  filter: grayscale(0) blur(0);
  transition: .4s ease-in-out;
}
.article-image:hover:before {
  -webkit-filter: grayscale(100%) blur(2px);
  filter: grayscale(100%) blur(2px);
  transition: .4s ease-in-out;
}
.ar-image {
  position: relative;
  width: 238px;
  height: 150px;
}
.article-image > p {
  display: none;
}
.article-image:hover > p {
  position: absolute;
  top: 40%;
  display: block;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  z-index: 9999999;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: .4s ease-in-out;
}
<div class="ar-image">
  <div class="article-image">
    <p>Lire plus</p>
  </div>
</div>

Alternatively, make a minor change to the structure and pull the text out of the image div so it's not a child and subject to the blur.

.article-image {
  height: 150px;
  width: 238px;
  -webkit-filter: grayscale(0) blur(0);
  filter: grayscale(0) blur(0);
  transition: .4s ease-in-out;
}
.article-image:hover {
  -webkit-filter: grayscale(100%) blur(2px);
  filter: grayscale(100%) blur(2px);
  transition: .4s ease-in-out;
}
.ar-image {
  position: relative;
  width: 238px;
  height: 150px;
}
.article-image + p {
  opacity: 0;
}
.article-image:hover + p {
  position: absolute;
  top: 40%;
  opacity: 1;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  z-index: 9999999;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: .4s ease-in-out;
}
<div class="ar-image">
  <div style="background: url('http://maximumwallhd.com/wp-content/uploads/2015/06/fonds-ecran-plage-palmier-12-660x330.jpg')" class="article-image">
  </div>
  <p>Lire plus</p>
</div>