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;
}
