マウスを画像の上に乗せたときに、画像を切り替える方法をお伝えします。
javaScriptを使用せず、HTMLとCSSだけで簡単に作れるので、ぜひ試してみてください。
Before → Afterや、画像を比較する際など、並べて表示するのももちろん良いのですが、ユーザービリティをよくしたり、訪問者をちょっとした動きで楽しませることもできます。
どんな時に使える？？
例えば・・【メイクのBefore → Afterを掲載したい場合】
- 一度にたくさん掲載したい場合、Before → After両方を載せると掲載ボリュームが多くなりすぎる時
- 綺麗になったAfterだけを見せることで、お客様からの掲載OKをもらいやすくなる
- Beforeを見るのに、ユーザー自身でアクションを起こしてもらうことで、印象に残りやすいサイトになる
← イメージとしてはこんな感じです。
＊マウスオンすると画像が切り替わります。
↑ イメージとしてはこんな感じです。
＊画像タップ > 画像の外をタップで切り替わります。
この記事はHTML,CSSの基礎知識がある方向けに書いています。
たった3ステップで完成するよ！
作成手順
Step1. HTMLをコピー
まずはコードをコピーし、画像を載せたいところに貼り付けます。
<div class="change">
<img src="#1" alt="cat-img１" />
<img src="#2" alt="cat-img2" />
</div>Step2. 画像urlを貼り付け
＃1 と＃2 →この部分を画像urlに置き換えます。
＃1は先に見せておきたい画像、＃2はマウスオン（タップ）で見せたい画像を指定します。
<div class="change">
<img src="https://ambran-create.com/wp-content/uploads/2023/04/avatar20230414201931.jpg" alt="cat-img１"/>
<img src="https://ambran-create.com/wp-content/uploads/2023/04/avatar20230412202640.jpg" alt="cat-img2"/>
</div>Step3. CSSを追記
3. CSSをコピーしCSS記載部分に貼り付けます。（WordPress の場合は「追加CSS」）
.change {
position: relative;
width: 280px;
height: 280px;
margin: 0 auto;
display: block;
overflow: hidden;
cursor: pointer;
}
.change img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
display: block;
-webkit-transition: .4s ease-in-out;
transition: .4s ease-in-out;
}
.change:hover img:nth-of-type(2) {
opacity: 0;
}コンテンツをスッキリ見せたり、ユーザーにアクションを起こしてもらうことで印象付けやすくする効果があるよ！
注意点
記載がないとユーザーが気が付かない場合もあります。
マウスオンすると画像が切り替わります。
（スマホの場合は画像タップ 画像の外をタップで切り替わります。 ）
などの注意書きで、誘導する必要があります。
エステ・ハンドメイドなどのビフォーアフターにも使えますので、ぜひ取り入れてみてください。
