前回の記事の方法を透過画像で利用すると、重ねた２枚の画像両方が表示されている状態になってしまいます。
そこで opacity を詳細に記載することで、新たな要素が出現するように工夫してみます。
言葉で説明するのが難しいので、具体的には以下のCodePenをご覧ください。
歌っている犬の画像にカーソルを合わせると、新たな要素(今回は音符)が出現するような表現です。
※前回の方法だと hover してなくても音符が表示されてしまいます。
See the Pen Rollover Image Transparent by netamame (@netamame) on CodePen.
HTML
.container はサンプルの表示調整用なので自由に設定して下さい。
.rollover 内の構造はこれで１セットです。
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】画像のサイズ指定なしでホバー時の画像切り替え(ロールオーバー)を実装する” にあります。