CSSでhover時に画像の切り替えを行う方法！
CSSでhover時に画像の切り替えを行う方法について解説します。CSSでhover時に画像を切り替えることでよりオシャレなWEBページを作成することができます。ここでは2つの画像をいろんなパターンで切り替える方法について紹介します。
CSSでhover時に画像の切り替えを行いたい
CSSでhover時に画像を切り替えて、より複雑でオシャレなWEBページを作成したいということがあります。
ここでは以下の猫と犬の2つの画像を用いて色んなパターンにおいて、CSSでhover時に画像を切り替える方法について紹介します。
またHTMLは以下の形で全て同様に用います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="img_container">
<img src="cat-2536662_1280.jpg" width="100%" height="100%">
<img src="t-r-photography-TzjMd7i5WQI-unsplash.jpg" width="100%" height="100%">
</div>
</body>
</html>またCSSで以下のコードを用いて2つ目の画像を1つ目の画像の上に表示させる記述も以下で共通して用います。
そのコードを以下に載せておきます。
.img_container{
width: 70%;
height: 70%;
margin: 50px auto;
overflow: hidden;
position: relative;
}
img:nth-child(2){
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}まず親要素である.img_containerにposition: relative;を設定し、1つ目の画像がWEBページ上の真ん中にあることから、子要素であり二つ目の画像に対して、真ん中にある1つ目の画像の上に被せたいので、 position: absolute;、top: 50%;、left: 50%;、transform: translate(-50%, -50%);を設定しています。
もし1つ目の画像をデフォルトで表示させたい場合は、z-indexプロパティやopacityプロパティを用いて適宜調整してください。
CSSでhover時に画像の切り替えを行う方法
フェードして切り替える方法
まずフェードして切り替える方法について紹介します。
マウスオーバーしてフェードしつつ画像を切り替えるには、マウスオーバーした際に1つ目の画像の上に表示されている2つ目の画像を消したいので、.img_container:hover img:nth-child(2)にopacity: 0;とし、またフェードさせるためにtransition: opacity 1s;とすることで、1秒かけて2つ目の画像が消えるように設定します。
では実際にサンプルコードを用いて挙動を見てみましょう。
このようにホバーすると画像がフェードしながら切り替わっていることが分かります。
上下左右に下りてきて切り替わる方法
.img_container:hover img:nth-child(2)にtop: 150%;を、またフェードさせるためにtransition: top 1s;を設定します。
ここでなぜ150%なのかというと、始めに2枚目の画像を真ん中に設置するためにtransformのtranslateでX軸方向に-50%ずらしているために、100%ではなくて150%となります。
反対に下から上ってくる方法については、.img_container:hover img:nth-child(2)にtop: -50%;、左右からスライドさせて画像を切り替えるには.img_container:hover img:nth-child(2)にleft: 150%;またはleft: -50%;を設定することで可能です。
ここで-100%ではなく-50%としているのは、150%としているのと同じ理由です。
それではサンプルコードを用いて、上から画像が下りてきて切り替わる挙動を見てみましょう。
このようにマウスオーバーすると上から1枚目の画像が下りてくるように見えることが分かります。
まとめ
いかがでしたでしょうか？
ここで紹介した以外にもtransformプロパティなどを組み合わせて、様々なパターンでhover時に画像の切り替えを行うことが可能です。
まずはここで紹介したようなシンプルな形から試してみてください。
