前回の記事の方法を透過画像で利用すると、重ねた2枚の画像両方が表示されている状態になってしまいます。
そこで opacity を詳細に記載することで、新たな要素が出現するように工夫してみます。

言葉で説明するのが難しいので、具体的には以下のCodePenをご覧ください。
歌っている犬の画像にカーソルを合わせると、新たな要素(今回は音符)が出現するような表現です。

※前回の方法だと hover してなくても音符が表示されてしまいます。

See the Pen Rollover Image Transparent by netamame (@netamame) on CodePen.

HTML

.container はサンプルの表示調整用なので自由に設定して下さい。
.rollover 内の構造はこれで1セットです。
HTML内に切り替える画像が二つとも入っているので、何かと使いやすいと思います。

<div class="container">
  <div class="rollover-transparent">
    <a href="#">
      <img src="https://netamame.com/2021/wp-content/uploads/2021/04/dog-sing-hover.png" alt="変化後 音符あり">
      <img src="https://netamame.com/2021/wp-content/uploads/2021/04/dog-sing.png" alt="変化前 音符なし">
    </a>
  </div>
</div>

CSS

/* Layout */ 部分はサンプルの表示調整用なので自由に設定して下さい。
・/* Rollover Transparent */ 部分を設定しておけば、どんな状況でも使いまわせます。

前回の記事では、hover 前の要素は隠してはいませんでしたが、今回はhover前の要素を隠す工夫をしています。

/* Layout - 表示調整用のスタイルです */
body, html {
  width: 100%;
  height: 100%;
}
body {
  background-color: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container{
  max-width:800px;
  width: 100%;
}
img{
  max-width:100%;
  height:auto;
}

/* Rollover Transparent */
.rollover-transparent {
  position: relative;
}
.rollover-transparent img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  display: block;
  transition: 0.7s;
}
.rollover-transparent img:nth-of-type(2) {
  opacity: 0;
}
.rollover-transparent img:nth-of-type(1),
.rollover-transparent:hover img:nth-of-type(1),
.rollover-transparent:hover img:nth-of-type(2) {
  opacity: 1;
}

1 件のコメントが “【透過画像ver】画像のサイズ指定なしでホバー時の画像切り替え(ロールオーバー)を実装する” にあります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です