hoverでimgをぼかしてもすぐに解除されてしまう

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

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta http-equiv="content-type" charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6  <title></title>
7  <meta name="description" content="">
8  <meta name="keywords" content="">
9  <link rel="stylesheet" href="public/css/index.css">
10  <link rel="stylesheet" href="public/css/all_common.css">
11  <script src="https://unpkg.com/scrollreveal"></script>
12</head>
13
14<body>
15  <div class="main-contents">
16    <ul>
17      <li>
18          <a class="main-content" href="#">
19            <span class="mask"><img class="pc" src="test.png" alt=""></span></a>
20          <img class="sp" src="" alt="">
21          <div class="main-content-textarea">
22            <p class="main-content-fse">NextRevolution<br>FSE01</p>
23            <h2 class="main-content-title">わたしたちについて</h2>
24          </div>
25        </a>
26      </li>
27    </ul>
28  </div>
29<!--
30  <div class="main-content">
31    <ul>
32      <li>
33        <a class="button" href="#">
34          <img class="pc" src="test.png" alt="">
35          <img class="sp" src="test.png" alt="">
36          <div class="main-content-textarea">
37            <p class="main-content-fse">NextRevolution<br>FSE01</p>
38            <h3 class="main-content-title">わたしたちについて</h3>
39          </div>
40        </a>
41      </li>
42    </ul>
43  </div>-->
44  <!--JavaScript-->
45  <script src="/public/js/javascript.js"></script>
46  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
47  <script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js"></script>
48  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
49  <script> AOS.init()</script>
50  <!--背景移動文字-->
51
52  <script src="/public/js/javascript.js"></script>
53  <script src="/public/js/anime.min.js"></script>
54  <script src="/public/js/javascript.js"></script>
55</body>
56</html>

css
1*{
2  margin: 0;
3  padding: 0;
4  border: 0;
5  border: none;
6  word-break: break-all;
7  max-width: 1700px;
8}
9body{
10  margin: 0;
11  padding: 0;
12  border: 0;
13}
14ul{
15  list-style: none;
16  padding: 0;
17}
18.main-content {
19  position: relative;
20  display: inline-block;
21  border: 2px solid #fff;
22  color: #fff;
23  text-align: center;
24  text-decoration: none;
25  outline: none;
26  transition: height .3s, width .3s .3s;
27}
28.main-content::before,
29.main-content::after {
30  position: absolute;
31  z-index: 100;
32  content: '';
33  width: 0;
34  height: 0;
35  border: 4px solid transparent;
36  box-sizing: content-box;
37}
38.main-content::before {
39  top: 30px;
40  left: 45px;
41}
42.main-content::after {
43  bottom: 30px;
44  right: 45px;
45}
46.main-content:hover::before,
47.main-content:hover::after {
48  width: 92%;
49  height: 88%;
50}
51.main-content:hover::before {
52  border-bottom-color: #ffffff;
53  border-left-color: #ffffff;
54  transition: height .3s, width .3s .3s;
55}
56.main-content:hover::after {
57  border-top-color: #ffffff;
58  border-right-color: #ffffff;
59  transition: height .3s, width .3s .3s;
60}
61
62.main-contents ul,.main-contents a{
63 display: block;
64 letter-spacing: .15em;
65 color: white;
66}
67.main-content img{
68  width: 100%;
69  height: auto;
70  filter: blur(0);
71	transition: .3s ease-in-out;
72}
73.main-content img:hover{
74  filter: blur(3px);
75}
76.mask{
77  display: block;
78  line-height: 0;/*行の高さを0にする*/
79  overflow: hidden;/*拡大してはみ出る要素を隠す*/
80}
81.main-content-textarea{
82  position: absolute;
83  left: 50px;
84  top: 50px;
85  z-index: 1;
86  padding: 34px 40px 0 40px;
87  text-align: left;
88}
89
90/*スマホCSS*/
91@media screen and (max-width: 1000px) { 
92}

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

回答2件

.main-content をホバーすると、疑似要素がimgを覆うので、imgのhoverが無効になり、すぐにぼかしが消えてしまいます。

css
1.main-content img:hover{
2  filter: blur(3px);
3}

上記を下記に修正すればいいでしょう。.main-content をホバーでimgをぼかす。

css
1.main-content:hover img{
2  filter: blur(3px);
3}

投稿2021/10/31 07:26

hatena19

総合スコア33808

ベストアンサー

before/after疑似要素がimgの上に作成されるため、imgのhoverが解除されています。pointer-events: none;を指定して下さい。

.main-content:hover::before,
.main-content:hover::after {
  width: 92%;
  height: 88%;
  pointer-events: none;
}

投稿2021/10/31 07:23

k_a

総合スコア983

k_a

2021/10/31 07:24

`aタグの中にあるimgをぼかしたい`というタイトルは今回の質問に合致していないように見えます。`hoverでimgをぼかしてもすぐに解除されてしまう`のように状況がわかるようなタイトルにしてください。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.45%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

hoverでimgをぼかしてもすぐに解除されてしまう

関連した質問