Css blur on background image :hover but not on tex

问题:

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

回答1:

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>

回答2:

.article-image{
    height: 150px;
    width: 238px;
    -webkit-filter: grayscale(0) blur(0);
    filter: grayscale(0) blur(0);
    transition: .4s ease-in-out;
}

.ar-image:hover .article-image{
    -webkit-filter: grayscale(100%) blur(2px);
    filter: grayscale(100%) blur(2px);
    transition: .4s ease-in-out;
}

.ar-image{
    position: relative;
    width: 238px;
    height: 150px;
}

.ar-image > p{
    display: none;
}

.ar-image:hover > p{
    position: absolute;
    top: 0;
    display: block;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    z-index: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: .4s ease-in-out;
    line-height:150px;
    margin:0;
}

<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>

NOTE: Since the text is positioned absolute, I've removed it from the background container and placed it outsite.

and :hover event added for the main container ('.ar-image').

回答3:

If you want to remove the blur on edges, you need to wrap the hole thing and give it a width + height + overflow hidden

* {
  transform: translateZ(0);
}
.wrapper{
  width: 238px;
  height: 150px;
  overflow:hidden;
  position:relative;
}
.wrapper .article-image {
  width: 238px;
  height: 150px;
  -webkit-filter: grayscale(0) blur(0);
  filter: grayscale(0) blur(0);
  transition: .4s ease-in-out;
}

.wrapper:hover .article-image{
  -webkit-filter: grayscale(100%) blur(2px);
  filter: grayscale(100%) blur(2px);
  transition: .4s ease-in-out;
}

.wrapper > p {
  display: none;
  position: absolute;
  top: 40%;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  z-index: 9999999;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: .4s ease-in-out;
  pointer-event:none;
}
.wrapper:hover > p {
  display: block;
}

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