IT the Best

はてなブログのカスタマイズ情報を中心に、WEBデザインからJavaScriptまでWEB系の開発情報を発信します。便利ツールや暇つぶしのゲームなど開発物も公開します。

【WEBデザイン】CSSで画像をホバー時にハイライトさせてオシャレにする

f:id:Surprisedblog:20190625090709j:plain

unsplash-logo Talles Alves

 

記事トップ画像のように、マウスホバー時に画像を拡大/縮小・ぼかしをしてハイライトさせます。

 

cssの「transition」「opacity」「transform」プロパティの3つを使用しています。

 

 

サンプル(マウスホバー時)

 

画像(Photo by Michael Liao on Unsplash)を使用したサンプル

 

拡大/縮小

f:id:Surprisedblog:20190625093725j:plain

<style>
img.img1:hover{ transform: scale(2.0); /*画像の拡大/縮小(xy)*/ }
</style>

f:id:Surprisedblog:20190625093725j:plain

<style>
img.img2:hover{ transform: scale(1.7,1.0); /*画像の拡大/縮小(xy)*/ }
</style>

f:id:Surprisedblog:20190625093725j:plain

<style>
img.img3:hover{ transform: scale(0.5); /*画像の拡大/縮小(xy)*/ }
</style>

 

ぼかし

f:id:Surprisedblog:20190625093725j:plain

f:id:Surprisedblog:20190625093725j:plain

透明度の値:0.5

<style>
img.img4:hover{
opacity:0.5;/*透明度*/
}
</style>
<style>
img.img5{
opacity:0.5;/*透明度*/
}
</style>

 

変化時間の設定

f:id:Surprisedblog:20190625093725j:plain

変化完了時間: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>

f:id:Surprisedblog:20190625093725j:plain

 

1秒でmargin-leftを変化、1秒後1秒でmargin-topを変化、その他はホバー時変化

<style>
img{
    transition: margin-left 1s,margin-top 1s 1s;
}
</style>

f:id:Surprisedblog:20190625093725j:plain