CSS3でテキストホバーぼかし？

Question

私がボックスにカーソルを合わせると、imgをぼかし、imgの明るさを60％下げてから、テキストが表示されます。しかし、それは動作しますが、テキストの上にマウスを置くたびに、ぼかしは消え去り、テキストはボックスから外に出るまでそのまま残ります。私はこれをどのように修正して、すべてが同時に反応できるのだろうと思っていましたか？

HTMLコード： `

<section class="container"> 
    <div class="row"> 
    <figure class="col-sm-6"> 
     <img src="edge.jpg"> 
     <h2>COBAN Technologies</h2> 
     <h4>Quality Control Specialist</h4> 
</section> 

`

CSSコード：

/*work panels*/ 

section .col-sm-6 img { 
    margin: 0 0 30px 0; 
    width: 100%; 
    height: 100%; 
    -webkit-transition: 0.2s; 
    transition: 0.2s; 
} 

section .col-sm-6 img:hover { 
    filter: blur(2px) brightness(60%); 

} 

section .col-sm-6 :not(img) { 
    position: absolute; 
    top: 30%; 
    z-index: 1; 
    color: #ffffff; 
    width: 100%; 
    text-align: center; 
    letter-spacing: 0.2rem; 
    opacity: 0; 
    -webkit-transition: 0.2s; 
    transition: 0.2s; 
} 

section .col-sm-6:hover :not(img) { 
    opacity: 1; 
} 

section .col-sm-6 h4 { 
    top: 50%; 
} 

Answer 1

あなたはSTYを適用するよう

section .col-sm-6:hover img { 
    filter: blur(2px) brightness(60%); 
} 

にあなたのホバー行を変更<img>だけをホバーするのではなく、テキストと画像の両方を含む要素全体をホバーすると、

/*work panels*/ 
 

 
section .col-sm-6 img { 
 
    margin: 0 0 30px 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    -webkit-transition: 0.2s; 
 
    transition: 0.2s; 
 
} 
 

 
section .col-sm-6:hover img { 
 
    filter: blur(2px) brightness(60%); 
 
} 
 

 
section .col-sm-6 :not(img) { 
 
    position: absolute; 
 
    top: 30%; 
 
    z-index: 1; 
 
    color: #ffffff; 
 
    width: 100%; 
 
    text-align: center; 
 
    letter-spacing: 0.2rem; 
 
    opacity: 0; 
 
    -webkit-transition: 0.2s; 
 
    transition: 0.2s; 
 
} 
 

 
section .col-sm-6:hover :not(img) { 
 
    opacity: 1; 
 
} 
 

 
section .col-sm-6 h4 { 
 
    top: 50%; 
 
}

<section class="container"> 
 
    <div class="row"> 
 
    <figure class="col-sm-6"> 
 
     <img src="https://lastfm-img2.akamaized.net/i/u/avatar300s/a96ecf5e524449ec866a6674709bb212.jpg"> 
 
     <h2>COBAN Technologies</h2> 
 
     <h4>Quality Control Specialist</h4> 
 
    </figure> 
 
    </div> 
 
</section>