CSSで:hover時にwidth, height, scaleを使用して拡大する方法

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