擬似クラス「:hover」で画像（リンク有り、アニメーション初級）を拡大し、スマホでは無効化する - レクチャーサイト

06擬似クラス「:hover」で画像（リンク有り、アニメーション初級）を拡大し、スマホでは無効化する

リンク範囲が画像とテキスト込みでアニメーションが画像のみの場合

.********** a {
  overflow: hidden;
}
.********** a img {
  transition: 1s;
}
.********** a:hover img {
  transform: scale(1.2, 1.2);
}


-- メディアクエリの場合 --
@media screen and (max-width: 800px) {
  .********** a:hover img {
    transform: none;
  }
}


-- コンテナクエリの場合の親要素（.groupの親要素） --
********** {
  container-type: inline-size;
  container-name: chapter4-6-box;
}
-- コンテナクエリの場合 --
@container chapter4-6-box (max-width: 800px) {
  .********** a:hover img {
    transform: none;
  }
}