transform:scale()

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

transform:scale()
- DEMO
  - sample1
  - sample2
  - sample3
- 例
  - HTML
  - CSS

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

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

transform: scale(x,y);

DEMO

DEMO使用画像：Jade Stephens on Unsplash

sample1

f:id:Surprisedblog:20190809085449j:plain

拡大/縮小

sample2

拡大/縮小

sample3

親要素に、はみ出しを表示しない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);
}