簡単にCSSだけで画像をhoverした時にズームさせる

まいど！ドスブイサポート高橋しゃちょーです。

今回は、hoverしたら画像をズームさせて動きのある装飾を行います
CSSだけで実装可能なので比較的簡単におしゃれ感を演出できます。

ちなみに画像の上にマウスが乗っかった時の事をhoverと言います。

ではさっそく解説していきたいと思います。

cssだけで画像をhoverした時に拡大させてみよう

単純にhoverした時に拡大するので
要素（この場合imgタグ）にCSSで:hoverを付与してあげます。

HTML

<div class="hover_img">img src="img/1.jpg"></div>

CSS

.hover_img img:hover{
  transform:scale(1.1,1.1);
}

これだけで拡大にはなりますが味気ないですよね
では、オシャレにヌルっと拡大するように指定してあげましょう。

画像に対して「transition-duration」を指定すると

.hover_img img{
transition-duration: 0.3s;
}

これだけでヌルっとなりましたね！

これでも問題はないと思いますが、画像サイズが親要素の枠を超えて
サイズが大きくなって拡大しまいますので、枠内で拡大するように指定すると
よりリンクなどで使いやすいCSSでの拡大が可能になります。

CSSで親要素にhiddenしてあげる

親要素のサイズを上のHTMLのサンプルの親要素「hover_img」の横幅を
width:350pxとした場合このようになり、この親要素に
overflow: hidden;を追記することで、350px以内でimgをhoverさせることになります。

.hover_img{
    width:350px;
    margin:0 auto;
    overflow: hidden;
}
.hover_img img:hover{
  transform:scale(1.1,1.1);
}

拡大のサイズを変更する時は1.1の数値を1.2などに増やすとボリュームが増しますのでお好みで調整してみてください。

以上

今回はCSSだけで画像をマウスが乗っかった時に拡大させるような
アニメーションっぽい装飾をさせて頂きました。
簡単でおしゃれにCSSだけで可能なので取り入れてみてはいかがでしょうか？

最後までご覧いただきまして有難うございました！

お仕事のご依頼やお問い合わせはフォームやツイッターにてお気軽にお問い合わせ下さい。

お問い合わせフォーム

» 高橋しゃちょー (@osaka_dos) | Twitter