All geek questions in one place

Blur bg image in container but not content inside

I have a column with a background image set to cover, and inside the column there is another div that contains the contents: heading, description and tags.

The content is set to display: none;, and the background image is in focus.

When I hover over a background image, it is blurred and the content appears.

However, the content is also blurred, and I cannot 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/

Content may be a little hard to see, but it is, just move the mouse to the upper 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>
Run codeHide result
+4
3

DIV.

.project-content2 BG DIV .project-bg .blur. .project-wrapper DIV.

DIV DIV:

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

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

hover .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>
Hide result
+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 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 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>
<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>

.project {
position: relative;
}

.project-bg {
position: absolute;
width: 100%;
height: 100%;
backgrounds-size: cover;
}

z. , , .

, .

!:)

0

. , , .

, . , , .

Fiddle: https://jsfiddle.net/hnjq88nd/8/

HTML:

<div class="project">
  <div class="project-1">
    <div class="project-content">
      My Content
    </div>
    <div class="project-bg" style="background: url('http://i.imgur.com/0JQxkW7.jpg') center center / cover;">
      &nbsp;
    </div>
  </div>
</div>

CSS

* {
  position: relative;
}

html,
body {
  height: 100%;
}

.project {
  width: 100%;
  height: 500px;
}

[class^="project-"],
.project-content,
.project-bg {
  height: 100%;
}

.project-content {
  padding: 75px;
  opacity: 0;
  transition: opacity .2s;
  color: #fff;
  z-index: 2;
  transform: scale(.95);
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.project-bg {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

/* Interactions */
[class^="project-"]:hover .project-content {
  opacity: 1;
  transform: scale(1.04);
}

[class^="project-"]:hover .project-bg {
  -webkit-filter: blur(10px);
  filter: blur(10px);
  transform: scale(1.09);
}

, :

[class^="project-"] // Call on any project-# selector

, , , .

.project-content {
  padding: 75px;
  opacity: 0;
  transition: opacity .2s;
  color: #fff;
  z-index: 2;
  transform: scale(.95);
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
0

Source: https://habr.com/ru/post/1681982/

More articles:


All Articles