「main-content」にホバーした際に、背景の画像をぼかしたいのですが、一瞬ぼかしが入りますが、適用させているborderの動きが完了するとぼかしが消えてしまいます。どのようにコードを書けばよいのでしょうか？ ```html

NextRevolution
FSE01

わたしたちについて

``` ```css *{ margin: 0; padding: 0; border: 0; border: none; word-break: break-all; max-width: 1700px; } body{ margin: 0; padding: 0; border: 0; } ul{ list-style: none; padding: 0; } .main-content { position: relative; display: inline-block; border: 2px solid #fff; color: #fff; text-align: center; text-decoration: none; outline: none; transition: height .3s, width .3s .3s; } .main-content::before, .main-content::after { position: absolute; z-index: 100; content: ''; width: 0; height: 0; border: 4px solid transparent; box-sizing: content-box; } .main-content::before { top: 30px; left: 45px; } .main-content::after { bottom: 30px; right: 45px; } .main-content:hover::before, .main-content:hover::after { width: 92%; height: 88%; } .main-content:hover::before { border-bottom-color: #ffffff; border-left-color: #ffffff; transition: height .3s, width .3s .3s; } .main-content:hover::after { border-top-color: #ffffff; border-right-color: #ffffff; transition: height .3s, width .3s .3s; } .main-contents ul,.main-contents a{ display: block; letter-spacing: .15em; color: white; } .main-content img{ width: 100%; height: auto; filter: blur(0); transition: .3s ease-in-out; } .main-content img:hover{ filter: blur(3px); } .mask{ display: block; line-height: 0;/*行の高さを0にする*/ overflow: hidden;/*拡大してはみ出る要素を隠す*/ } .main-content-textarea{ position: absolute; left: 50px; top: 50px; z-index: 1; padding: 34px 40px 0 40px; text-align: left; } /*スマホCSS*/ @media screen and (max-width: 1000px) { } ```

わたしたちについて

	@@ -1 +1 @@
1	- ~~aタグの中にある~~imgをぼかしたい
1	+ hoverでimgをぼかしてもすぐに解除されてしまう

質問編集履歴