IT the Best

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

transform:scale() - マウスホバー時に写真などを縮小/拡大する | CSS Introduction

Photo by Jade Stephens on Unsplash

Photo by Jade Stephens on Unsplash

 

 

transform:scale()

transformプロパティのscale()関数は、要素の大きさを水平方向と垂直方向に対して変更することができます。

要素をマウスホバー時に拡大/縮小することで強調表示させることができます。

 

transform: scale(x,y);

 

 

 

DEMO

DEMO使用画像:Jade Stephens on Unsplash

 

sample1
f:id:Surprisedblog:20190809085449j:plain

拡大/縮小

sample2
f:id:Surprisedblog:20190809085449j:plain

拡大/縮小

sample3
f:id:Surprisedblog:20190809085449j:plain

親要素に、はみ出しを表示しないCSSを適用するとズームしたような感じになります。

HTML
<div class="sample sample1">
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/S/Surprisedblog/20190809/20190809085449.jpg" />
<p>拡大/縮小</p>
</div>
<div class="sample sample2">
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/S/Surprisedblog/20190809/20190809085449.jpg" />
<p>拡大/縮小</p>
</div>
<div class="sample sample3">
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/S/Surprisedblog/20190809/20190809085449.jpg" />
</div>
CSS
div.sample>img,div.sample>p{
transition: all .3s;
-webkit-transition: all .3s;
}
.sample1>img:hover,.sample1>p:hover{
transform:scale(1.2,1.2);
}
.sample2>img:hover,.sample2>p:hover{
transform:scale(0.8,0.8);
}
.sample3{
overflow:hidden;
display: table;
margin: auto;
}
.sample3>img:hover{
transform:scale(1.2,1.2);
}

 

transform:scale()を使用したWEBデザイン系記事はコチラ

www.it-the-best.com