Home>

I want to make the background image smoothly blur when it is in focus and out of focus.


  <section>
    
      Service overview
    
  </section>
Tried code (1)

↓ In this case, text will be blurred.

. effect-blur {
  overflow: hidden;
  position: relative;
}
.sec-topContent.jumbotron-extend {
  height: 50vh;
  min-height: 768px;
  background: $color-dk-gray;
  background: url (../ img/[email protected]) no-repeat;
  background-position: top center;
  background-size: cover;
  z-index: 0;
  transition: all 0.3s ease;
  width: 100%;
  overflow: hidden;
}
.sec-topContent .container {
  transition: all 0.3s ease;
}
.effect-blur: hover .sec-topContent.jumbotron-extend {
  filter: blur (5px);
}
.effect-blur: hover .sec-topContent .container {
  opacity: 1.0;
}
Tryed code # 2

↓ In this case, although the text is not blurred, it did not switch smoothly when hovering and when hovering was lost.

. sec-topContent.jumbotron-extend {
  height: 50vh;
  min-height: 768px;
  background: $color-dk-gray;
  background: url (../ img/[email protected]) no-repeat;
  background-position: top center;
  background-size: cover;
  position: relative;
  z-index: 0;
  overflow: hidden;
  transition: all 0.3s ease;// adding this code doesn't make it smooth
  &: hover :: before {
    content: "";
    background: inherit;
    -webkit-filter: blur (5px);
    -moz-filter: blur (5px);
    -o-filter: blur (5px);
    -ms-filter: blur (5px);
    filter: blur (5px);
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
  }
  .container {
    text-shadow: 0 0 10px rgba (0,0,0, .4);
  }
}
  • Answer # 1

    Set the background image and transition in the

    before element.
    So, it blurs when hover.

    . jumbotron-extend {
      height: 50vh;
      min-height: 768px;
      background: url (https://hatena19.com/wp-content/uploads/2019/09/typewriter.jpg) no-repeat;
      background-position: top center;
      background-size: cover;
      position: relative;
      z-index: 0;
      overflow: hidden;
      &:: before {
        content: "";
        background: inherit;
        transition: all 0.3s ease;
        position: absolute;
        top: -5px;
        left: -5px;
        right: -5px;
        bottom: -5px;
        z-index: -1;
      }
      &: hover :: before {
       -webkit-filter: blur (5px);
        -moz-filter: blur (5px);
        -o-filter: blur (5px);
        -ms-filter: blur (5px);
        filter: blur (5px);
      }
      .container {
        text-shadow: 0 0 10px rgba (0,0,0, .4);
      }
    }

    Operation check sample