HighLab

【CSS】imgをhoverの際にzoomにする

  • 公開日:
  • 更新日:
  • 文字数:770文字
.scale {
    width: 400px;
    height: 300px;
    overflow: hidden;
}
.scale img {
    -moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 0.5s linear;
}
.scale img:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}
<div class="scale">
    <img src="./css_scale.jpg">
</div>

参照元
http://raining.bear-life.com/css/css3%E3%81%AE%E3%80%8Ctransformscale%E3%80%8D%E3%81%A7hover%E3%81%97%E3%81%9F%E6%99%82%E3%81%AB%E7%94%BB%E5%83%8F%E3%82%92%E6%8B%A1%E5%A4%A7%E3%81%99%E3%82%8B