ここでは画像にマウスオーバーしたときに、画像が切り替わるスタイルシートの書き方について見ていきます。画像の切り替えは、いろいろやり方があるみたいですが、難しいことは嫌いなので、ここでは単純に同じサイズの２つの写真を用意して、それをimgタグとして切り替えするという方法についてご紹介します。
それでは早速、見ていきましょう。
コンテンツ
下から画像が上がってくる切り替え
ボタンで表示を切り替えてご覧ください。
See the Pen
hover_switch-photo01 by kenichi (@ken81)
on CodePen.
HTML
<div class="box"> <img src="https://cotodama.co/wp-content/uploads/2019/06/hover_switch-photo01.jpg" /> <img src="https://cotodama.co/wp-content/uploads/2019/06/hover_switch-photo02.jpg" /> </div>
CSS
.box {
position:relative;
overflow:hidden;
width: 250px;
height: 250px;
margin: 0 auto;
}
.box img{
width: 100%;
cursor: pointer;
position:absolute;
}
.box img:last-child{
top: 100%;
transition: 0.3s;
}
.box:hover img:last-child{
top:0;
}
これは、マウスオーバーすると、下から画像がニョキッと出てきて写真が入れ替わるというものです。仕組みとしては、下に２枚目の画像を待機させておいて、マウスオーバーしたときに位置を上に移動させます。
作り方としては、はじめにboxというクラス属性を入れたdiv要素を用意して、これを画像をはめ込むための枠としてサイズ指定しておきます。下に待機中の画像が見えないよう、この枠からはみ出ている要素を消すためのプロパティoverflow:hidden;を指定します。このあと、子要素となる２枚めの画像にposition:absolute;を指定したいので、起点となるこの親要素にはposition:relative;を指定します。
あとは、２枚目の画像を.box img:last-childという形でセレクタ指定して、position:absolute;で位置を絶対値にしたあと、top: 100%;で最初に作ったdiv要素の下に潜り込ませておきます。
最後に、.box:hover img:last-childというセレクタでマウスオーバーしたときに上にニョキッと出てくるように、ポジションをtop:0;に指定すれば完成です。
ニョキッという動きを実装するには、transition: 0.3s;というプロパティを使います。これは0.3秒かけてアニメーションさせるための指定になります。
これで下からニョキッと画像が切り替わる実装ができました。
上から画像が上がってくる切り替え
See the Pen
hover_switch-photo02 by kenichi (@ken81)
on CodePen.
HTML
<div class="box"> <img src="https://cotodama.co/wp-content/uploads/2019/06/hover_switch-photo01.jpg" /> <img src="https://cotodama.co/wp-content/uploads/2019/06/hover_switch-photo02.jpg" /> </div>
CSS
.box {
position:relative;
overflow:hidden;
width: 250px;
height: 250px;
margin: 0 auto;
}
.box img{
width: 100%;
cursor: pointer;
position:absolute;
}
.box img:last-child{
top: -100%;
transition: 0.3s;
}
.box:hover img:last-child{
top:0;
}
今度は、上から画像がニョキッと出てくる仕組みです。これは最初の方法と基本的に同じ仕組みですが、ポジションをtop: -100%;からtop:0;に移動させるように変更しただけです。topをbottomに変更した方が簡単そうでしたが、写真が少しずれてしまうので、このようにしました。
上下だけでなくleftやrightで指定すれば、左から画像が出てくる切り替え、右から出てくる切り替えも実装できますね。
ふわっとフェードでの切り替え
See the Pen
hover_switch-photo03 by kenichi (@ken81)
on CodePen.
HTML
<div class="box"> <img src="https://cotodama.co/wp-content/uploads/2019/06/hover_switch-photo05.jpg" /> <img src="https://cotodama.co/wp-content/uploads/2019/06/hover_switch-photo06.jpg" /> </div>
CSS
.box {
position:relative;
overflow:hidden;
max-width: 250px;
margin: 0 auto;
}
.box img{
width: 100%;
cursor: pointer;
}
.box img:last-child{
position:absolute;
top: 0;
transition: 0.5s;
opacity: 0;
}
.box:hover img:last-child {
opacity: 1;
}
画像をマウスオーバーすると、ふわっと画像が切り替わる仕組みです。これは切り替える画像をopacity: 0;で透明にしておいて、マウスオーバーでopacity: 1;にして表示させるという方法です。
よくありがちな間違いとして、display: none;で非表示にして、display: block;で表示という切り替え方法がありますが、これだとtransitionプロパティが効かないため、ふわっとなりませんのでご注意を。
タテに回転して切り替え
See the Pen
hover_switch-photo04 by kenichi (@ken81)
on CodePen.
HTML
<div class="box"> <img src="https://cotodama.co/wp-content/uploads/2019/06/hover_switch-photo03.jpg" /> <img src="https://cotodama.co/wp-content/uploads/2019/06/hover_switch-photo04.jpg" /> </div>
CSS
.box{
width: 250px;
height: 250px;
margin: 0 auto;
position: relative;
cursor: pointer;
transform-style: preserve-3d;
transition: 1s;
}
.box img{
position: absolute;
width: 100%;
backface-visibility: hidden;
top: 0;
left: 0;
}
.box:hover{
transform: rotateX( 180deg );
}
.box img:last-child{
transform: rotateX( 180deg );
}
これは画像を３次元的に回転させて、裏面に違う画像があるように見えるというものです。
作り方としては、最初に、全体をラップしているdiv要素に対してtransform-style: preserve-3d;を指定して、要素が３次元的に表現できるようにしておきます。そして、２つの画像を重ねて配置しておくのですが、img要素に対して、backface-visibility: hidden;という指定をします。これはimg要素が裏返ったときには非表示にするという設定です。
ここからがちょっと難しいというか、この仕組のポイントになるのですが、初期設定で切り替え用の２枚目の画像にはtransform: rotateX( 180deg );を指定して裏返しの状態にしておきます。先ほど、backface-visibility: hidden;で裏返った画像は非表示になるように指定してあるので、１枚目の画像の上に２枚目の画像が重なっているのですが見えなくなっています。
そして、マウスオーバーで要素全体がタテに回転すると、１枚目の画像が裏返って非表示になり、２枚目の画像は表向きになるため表示されるという仕組みです。ちょっと難しい仕組みになっていますが、理解してしまえばそこまで難しくないと思います。
ヨコに回転して切り替え
See the Pen
hover_switch-photo05 by kenichi (@ken81)
on CodePen.
HTML
<div class="box"> <img src="https://cotodama.co/wp-content/uploads/2019/06/hover_switch-photo03.jpg" /> <img src="https://cotodama.co/wp-content/uploads/2019/06/hover_switch-photo04.jpg" /> </div>
CSS
.box{
width: 250px;
height: 250px;
margin: 0 auto;
position: relative;
cursor: pointer;
transform-style: preserve-3d;
transition: 1s;
}
.box img{
position: absolute;
width: 100%;
backface-visibility: hidden;
top: 0;
left: 0;
}
.box:hover{
transform: rotateY( 180deg );
}
.box img:last-child{
transform: rotateY( 180deg );
}
これは、先ほどのタテの回転を単純にヨコにしただけです。transform: rotateX( 180deg );のrotateXの部分が「X」だとタテ回転、「Y」だとヨコ回転になります。ちなみに180degは回転する角度です。
以上が、画像にマウスオーバーで写真を切り替えるCSSの作り方でした。
