IT the Best

HTML/CSS/JSに関する情報やはてなブログのカスタマイズに関する情報を掲載しています。

【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