記事トップ画像のように、マウスホバー時に画像を拡大/縮小・ぼかしをしてハイライトさせます。
cssの「transition」「opacity」「transform」プロパティの3つを使用しています。
サンプル(マウスホバー時)
画像(Photo by Michael Liao on Unsplash)を使用したサンプル
拡大/縮小
<style>
img.img1:hover{
transform: scale(2.0); /*画像の拡大/縮小(xy)*/
}
</style>
<style>
img.img2:hover{
transform: scale(1.7,1.0); /*画像の拡大/縮小(xy)*/
}
</style>
<style>
img.img3:hover{
transform: scale(0.5); /*画像の拡大/縮小(xy)*/
}
</style>
ぼかし
透明度の値:0.5
<style>
img.img4:hover{
opacity:0.5;/*透明度*/
}
</style>
<style>
img.img5{
opacity:0.5;/*透明度*/
}
</style>
変化時間の設定
変化完了時間:0.5s
<style>
img.img6{
transition: all 0.5s;/*状態変化の時間を指定*/
-webkit-transition: all 0.5s;
}
img.img6:hover{
transform:scale(2.0); /*画像の拡大/縮小(xy)*/
opacity:0.7; /*透明度*/
</style>
説明
transform:scale()
transformプロパティのscale()関数を使用して要素の拡大/縮小をします。
横(x)と縦(y)のサイズ倍率を変えることができ、カンマ(,)区切りで指定します。
横縦(xy)を2.0倍
transform: scale(2.0); /*画像の拡大/縮小(xy)*/
横(x)を1.7倍、縦(y)を1.0倍
transform: scale(1.7,1.0); /*画像の拡大/縮小(x,y)*/
横縦(xy)を0.5倍
transform: scale(0.5); /*画像の拡大/縮小(xy)*/
opacity
opacityプロパティを使用して要素をぼかす、透明にすることができます。
0.0以上1.0以下の値を指定します。
完全に透明
opacity:0; /*透明度*/
transition
transitionプロパティを使用して、要素の状態変化の完了時間を指定することができます。
値は、プロパティごとにカンマ(,)区切りで指定することができます。
ホバーによる要素の状態変化(枠内にカーソルを重ねる)
<style>
div:hover img{
opacity:0.7;/*ぼかし*/
transform: scale(1.2,1.2); /*画像の拡大*/
margin-left: 300px;/*右へ移動*/
margin-top: 100px;/*下へ移動*/
}
</style>
1秒ですべてのプロパティを変化
<style>
img{
transition: all 1s;
}
</style>
1秒でmargin-leftを変化、1秒後1秒でmargin-topを変化、その他はホバー時変化
<style>
img{
transition: margin-left 1s,margin-top 1s 1s;
}
</style>