jquery – 在容器中模糊bg图像,但不是内部的内容

2019年7月28日 170次阅读

我有一个背景图像设置为覆盖的列,在列内部还有另一个包含内容的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>

最佳答案 解决此问题的简单方法是将您的内容和背景图像放在两个单独的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>
点赞