jquery - 模糊容器中的背景图像，但不模糊容器中的内容

Question

我有一个背景图像设置为 cover 的列，在列内还有另一个包含内容的 div:标题、描述和标签。

内容设置为 display: none; 并且背景图像处于焦点位置。

当我将鼠标悬停在背景图片上时，它会变模糊并​​显示内容。

但是，内容也变得模糊，我不知道如何在保持背景图像模糊的同时消除模糊并使内容聚焦。

演示:https://jsfiddle.net/499hes8f/3/

内容可能有点难看，但它就在那里，只需将鼠标移到左上角即可。

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

Answer 1

解决这个问题的一个简单方法是将您的内容和背景图像放在两个单独的 DIV 中。

我将内容留在 .project-content2 中，并使用 .project-bg .blur 将 BG 移动到它自己的 DIV 中。两者都包装在 .project-wrapper DIV 中。

然后将元素背景 DIV 绝对定位在元素包装器 DIV 内:

.project-wrapper {
  height: 500px;
  position:relative;
}

.project-bg {
  position:absolute;
  top: 0;
  left:0;
  right:0;
  bottom:0;
 }

并将悬停选择器重构为 .project:hover .blur。

.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-wrapper {
  height: 500px;
  position:relative;
}

.project-bg {
  position:absolute;
  top: 0;
  left:0;
  right:0;
  bottom:0;
 }

.project:hover .blur {
  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-wrapper">
  
    <div class="project-bg blur" style="background: url('http://i.imgur.com/0JQxkW7.jpg') center center / cover;"></div>
    
    <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>