YAS's VB.NET Tips
 
NetCommons Tips
NetCommons Tips >> 記事詳細

2018/05/25

マウスがのると,一回り大きくなる画像

Tweet ThisSend to Facebook | by:YAS
 上の写真のように,マウスが写真の上にのったときに,写真を一回り大きくするアニメーションを,CSSのみでつけることができます。
 CSSで,クラス名がzoomのimgタグのhoverイベントに,transitionでアニメーションをつけています。
<style>
  img.zoom:hover {
    transition-duration:0.2s;
    transform:scale(1.2);
  }
</style>
<img class="zoom" src="./?action=common_download_main&upload_id=102" alt="" title="" hspace="0" vspace="0" style="border:0px solid rgb(204, 204, 204);float:none;" />
 ちなみに,上の写真は,柴犬を連れて,元旦に陣馬山から高尾山まで縦走したときの写真です。
04:45 | 投票する | 投票数(0) | コメント(0)