scaleを使用する方法
CSSで:hover時にwidth, height, scaleを使用して拡大するにはscaleを使用した方法とwidth, heightを使用した方法の2つがある。
:hover時にscaleを使用する場合
/* <div class="b"></div> */ .b { width: 100px; height: 100px; border-radius: 50%; background: #c00; transition: transform 2s; } .b:hover { transform: scale(2); }
ただし、この方法だと周辺の要素の上に重なるので重ねたくない場合はwidth, heightで変更する。
width, heightで変更
/* <div class="c"></div> */ .c { width: 100px; height: 100px; border-radius: 50%; background: #c00; transition: width 2s, height 2s; } .c:hover { width: 200px; height: 200px; }