マウスオーバーで画像を切り替えるテスト

画像にマウスを近づけると画像が変わる設定のテストです。参考にしたのはコチラです→

マウスオーバーで画像を切り替えて表示する方法 - すんこのアトリエとうぐいす工房

b

コードを丸写ししただけですが画像の位置や大きさは変更しています。もとの画像の表示する範囲の設定が上手くいきません(^^;

上の画像のコード

<style>
.sunsun1 {
    position: relative;
        width: 300px;
    height: 300px;
    display: block;
    overflow: hidden;
    cursor: pointer;
}
.sunsun1 img {
    position: absolute;
    top: 75%;
  left: 75%;
    -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
    width: 100%;
  display: block;
    -webkit-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
}
.sunsun1 img:nth-of-type(2) {
    left: -100%;
}
.sunsun1:hover img:nth-of-type(2) {
  left: 50%;
}
</style>
<div class="sunsun1">
  <a href="https://blog.hatena.ne.jp/tomi_kun/tomi-kun.hatenablog.com/">
    <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/t/tomi_kun/20230810/20230810083119.png"="a" />
    <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/t/tomi_kun/20230810/20230810083206.png" alt="b" />
  </a>
</div>

はてなブログで書きました。スマフォでも動きます。。。で何に使うんだろう？ 知らないことがたくさんです。

See you tomorrow!

e

follow us in feedly