1
私がボックスにカーソルを合わせると、imgをぼかし、imgの明るさを60%下げてから、テキストが表示されます。しかし、それは動作しますが、テキストの上にマウスを置くたびに、ぼかしは消え去り、テキストはボックスから外に出るまでそのまま残ります。私はこれをどのように修正して、すべてが同時に反応できるのだろうと思っていましたか?CSS3でテキストホバーぼかし?
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%;
}
ありがとうございました!!!!!! – Justin
問題はありません@ジャスティン –