CSS 画像をマウスオーバー（ホバー）した時の視覚効果 拡大、縮小、回転などなど
画像をマウスオーバーした時のいろいろなアニメーション効果をまとめてみました。
共通のHTML
<div class="Img">
<img class="クラス名を指定" src="../../images/mimi.png"
alt="">
</div>
共通のCSS
.Img{
width: 400px;
height: 250px;
margin: 50px auto;
overflow: hidden;
cursor: pointer;
text-align: center;
}
マウスオーバーで画像を拡大
<div class="Img">
<img class="Bigger" src="../../images/mimi.png" alt="">
</div>
CSS
.Bigger:hover{
transform: scale(1.2);
transition-duration: 0.3s;
}
マウスオーバーで画像を縮小
<div class="Img">
<img class="Smaller" src="../../images/mimi.png" alt="">
</div>
CSS
.Smaller{
transform: scale(1.2);
}
.Smaller:hover{
transform: scale(1);
transition-duration: 0.3s;
}
マウスオーバーで傾いた画像を真っ直ぐに
<div class="Img">
<img class="Inclination" src="../../images/mimi.png" alt="">
</div>
CSS
.Inclination{
transform: rotate(10deg);
}
.Inclination:hover{
transform: rotate(0);
transition-duration: 0.3s;
}
マウスオーバーで白黒画像をカラーに
<div class="Img">
<img class="Color" src="../../images/mimi.png" alt="">
</div>
CSS
.Color{
filter: grayscale(100%);
}
.Color:hover{
filter: grayscale(0);
transition-duration: 0.3s;
}
マウスオーバーで画像を回転
<div class="Img">
<img class="Rotation" src="../../images/mimi.png" alt="">
</div>
CSS
.Rotation:hover{
transform: rotate(360deg);
transition-duration: 0.7s;
}
マウスオーバーで画像をX軸回転
<div class="Img">
<img class="RotationX" src="../../images/mimi.png" alt="">
</div>
CSS
.RotationX:hover{
transform: rotate(360deg);
transition-duration: 1s;
}
マウスオーバーで画像をY軸回転
<div class="Img">
<img class="RotationY" src="../../images/mimi.png" alt="">
</div>
CSS
.RotationY:hover{
transform: rotate(360deg);
transition-duration: 1s;
}
マウスオーバーで丸い画像を四角に
<div class="Img">
<img class="Square" src="../../images/mimi.png" alt="">
</div>
CSS
.Img .Square{
width: 250px;
height: 250px;
border-radius: 50%;
transition-duration: 0.3s;
}
.Square:hover{
border-radius: 0;
transition-duration: 0.3s;
}
マウスオーバーで画像をアニメーションさせる方法をいくつか紹介しました。いろいろ値を変えてみるのも面白いかもしれません。
