フォーカス時に背景をゆっくりぼかして、テキストはぼかさないようにしたい

フォーカスしたときと外れたときに背景画像になめらかにぼかしが入るようにしたいです。

html
1<div class="effect-blur">
2  <section class="sec-topContent jumbotron jumbotron-extend">
3    <div class="container">
4      サービス概要
5    </div>
6  </section>
7</div>

試したコードその①

↓この場合、テキストまでボケてしまいます。

scss
1.effect-blur {
2  overflow: hidden;
3  position: relative;
4}
5
6.sec-topContent.jumbotron-extend {
7  height: 50vh;
8  min-height: 768px;
9  background: $color-dk-gray;
10  background: url(../img/img_top02@2x.jpg) no-repeat;
11  background-position: top center;
12  background-size: cover;
13  z-index: 0;
14  transition: all 0.3s ease;
15  width: 100%;
16  overflow: hidden;
17}
18
19.sec-topContent .container {
20  transition: all 0.3s ease;
21}
22.effect-blur:hover .sec-topContent.jumbotron-extend {
23  filter: blur(5px);
24}
25
26.effect-blur:hover .sec-topContent .container {
27  opacity: 1.0;
28}
29

試したコードその②

↓この場合、テキストはボケないものの、hover時とhoverが外れたとき、なめらかに切り替わりませんでした。

scss
1.sec-topContent.jumbotron-extend {
2  height: 50vh;
3  min-height: 768px;
4  background: $color-dk-gray;
5  background: url(../img/img_top02@2x.jpg) no-repeat;
6  background-position: top center;
7  background-size: cover;
8  position: relative;
9  z-index: 0;
10  overflow: hidden;
11  transition: all 0.3s ease; //このコードを入れてもなめらかにならない
12  &:hover::before{
13    content: "";
14    background: inherit;
15    -webkit-filter: blur(5px);
16    -moz-filter: blur(5px);
17    -o-filter: blur(5px);
18    -ms-filter: blur(5px);
19    filter: blur(5px);
20    position: absolute;
21    top: -5px;
22    left: -5px;
23    right: -5px;
24    bottom: -5px;
25    z-index: -1;
26  }
27  .container{
28    text-shadow: 0 0 10px rgba(0,0,0,.4);
29  }
30}
31

hatena19

2019/12/07 02:44

HTMLコードも提示してください。

行動規範の内容に同意します

回答1件

ベストアンサー

before要素に背景画像と transition を設定しましょう。
で、hover時にぼかしをかけます。

scss
1.jumbotron-extend {
2  height: 50vh;
3  min-height: 768px;
4  background: url(https://hatena19.com/wp-content/uploads/2019/09/typewriter.jpg) no-repeat;
5  background-position: top center;
6  background-size: cover;
7  position: relative;
8  z-index: 0;
9  overflow: hidden;
10  &::before {
11    content: "";
12    background: inherit;/*親の背景を継承*/
13    transition: all 0.3s ease; 
14    position: absolute;
15    top: -5px;
16    left: -5px;
17    right: -5px;
18    bottom: -5px;
19    z-index: -1;
20  }
21  &:hover::before{
22   -webkit-filter: blur(5px);
23    -moz-filter: blur(5px);
24    -o-filter: blur(5px);
25    -ms-filter: blur(5px);
26    filter: blur(5px);
27  }
28  .container{
29    text-shadow: 0 0 10px rgba(0,0,0,.4);
30  }
31}