transform: scale();を適用させてホバーしたときに表示に異常が出る。

①transform: scale();を適用させて、画面からはみ出る部分をoverflow: hidden;で隠しているのですが、ホバー時に対象のdivの枠に、言葉で表現しにくいのですが、フラッシュのような現象が起きています。
どのようにすれば綺麗にCSSを適用させられるのでしょうか？

■対策してみたこと
overflow: hidden;を各CSSにも記述してみた。
widthを90%にして、要素を画面ハジから離してみたら以上は無くなった。

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

CSS
1*{
2  margin: 0;
3  padding: 0;
4  border: 0;
5  border: none;
6  word-break: break-all;
7  max-width: 1366px;
8}
9body{
10  margin: 0;
11  padding: 0;
12  border: 0;
13}
14ul{
15  list-style: none;
16  padding: 0;
17}
18.main-contents ul,.main-contents a{
19  display: block;
20  letter-spacing: .15em;
21  color: #ffffff;
22 }
23.main-content {
24  position: relative;
25  display: inline-block;
26  text-align: center;
27  text-decoration: none;
28  outline: none;
29}
30.main-content::before,
31.main-content::after {
32  position: absolute;
33  z-index: 100;
34  content: '';
35  width: 0;
36  height: 0;
37  border: 4px solid transparent;
38  box-sizing: content-box;
39}
40.main-content::before {
41  top: 5%;
42  left: 3%;
43}
44.main-content::after {
45  bottom: 5%;
46  right: 3%;
47}
48.main-content:hover::before,
49.main-content:hover::after {
50  width: 92%;
51  height: 88%;
52  pointer-events: none;
53}
54.main-content:hover::before {
55  border-bottom-color: #ffffff;
56  border-left-color: #ffffff;
57  transition: height .3s, width .3s .3s;
58}
59.main-content:hover::after {
60  border-top-color: #ffffff;
61  border-right-color: #ffffff;
62  transition: height .3s, width .3s .3s;
63}
64.main-content img{
65  width: 100%;
66  z-index: 100;
67  transform: scale(1);
68	transition-duration: 0.3s;
69}
70.main-content img:hover{
71  filter: blur(3px) brightness(70%);
72  transform: scale(1.1);
73  transition-duration: 0.3s;
74}
75.mask{
76  display: block;
77  line-height: 0;
78  overflow: hidden;
79
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}

recal

2021/10/31 16:43

html 1).activ-contentの中の閉じaタグはどちらが正しいのでしょうか？ 2) - 下記要素が、全て左上に集約して表示されてしまいます。 - class="activ-contentの要素ごとに全て同じ位置に表示させたい要素ごと、全て同じ位置に表示させたいのなら現在の状態で間違いないのではありませんか？されてしまうとは？

hosoe

2021/11/02 09:49 編集

1)<span class="mask"><img class="pc" src="test.png" alt=""></span></a>　のaタグが記述ミスとなります。 2)aタグを修正したら改善しました。ありがとうございます。

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

回答1件

ベストアンサー

「フラッシュのような現象」の意味を図りかねるのですが、画像hover時のfilter: blur(3px)によるボカシがフラッシュのように見えているというわけではありませんか？
hoverと同時に画面の縁にボカシが入ります。しかし同時にtransformでスケールアップしているので、ボカシを欠けた部分は0.3秒以内に画面外へ押し出されます。

これらが同時に行われた結果、フラッシュに見えているのではないでしょうか？
filter: blur(3px)を削除すると改善するかと思います。

投稿2021/11/10 00:20