★ 透過画像を使いたい場合はこちらを参照下さい。
【透過画像ver】画像のサイズ指定なしでホバー時の画像切り替え(ロールオーバー)を実装する
まずは結論から。
hoverで画像切り替えを行う場合、width・heightともにピクセル指定をしている例がありますが、レスポンシブを考えると非常に使いにくいと感じるケースがあります。
そのため、今回の例では画像そのものには大きさを与えない方法で実装してみます。
ウィンドウサイズを変更すると画像がレスポンシブに可変します。
レスポンシブでのテキストサイズ可変も入れてしまうと本題からブレるので今回は除外します。
別の記事で紹介できればと。
See the Pen Rollover Image by netamame (@netamame) on CodePen.
HTML
.container はサンプルの表示調整用なので自由に設定して下さい。
.rollover 内の構造はこれで１セット、pタグのテキストが不要であれば消して結構です。
HTML内に切り替える画像が二つとも入っているので、何かと使いやすいと思います。
<div class="container">
<div class="rollover">
<a href="#">
<p>Text</p>
<!-- hover時に表示される画像(ねこ) -->
<img src="https://netamame.com/2021/wp-content/uploads/2021/04/cat.jpg" alt="cat">
<!-- 最初に表示される画像(いぬ) -->
<img src="https://netamame.com/2021/wp-content/uploads/2021/04/dog.jpg" alt="dog">
</a>
</div>
</div>CSS
・ /* Layout */ 部分はサンプルの表示調整用なので自由に設定して下さい。
・/* Rollover */ 部分を設定しておけば、どんな状況でも使いまわせます。
・/* Text */ は、画像にテキストを重ねています。
今回はシンプルに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 */
.rollover {
position: relative;
}
.rollover img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
display: block;
transition: 0.7s;
}
.rollover:hover img:nth-of-type(2) {
opacity: 0;
}
/* Text - 画像にテキストを重ねる*/
p{
font-size: 6rem;
font-weight: bold;
margin: auto;
color: #a0a; /*紫*/
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
z-index: 1;
transition: 0.7s;
}
.rollover:hover p{
color: #ff0; /*黄*/
}★ 透過画像を使いたい場合はこちらを参照下さい。
【透過画像ver】画像のサイズ指定なしでホバー時の画像切り替え(ロールオーバー)を実装する
1 件のコメントが “画像のサイズ指定なしでホバー時の画像切り替え(ロールオーバー)を実装する” にあります。