【CSS】画像をホバーでちょっと拡大
どうも、こんにちは。
友太郎(@yutarou_sakai)です。
今回は「画像をホバーしたときにちょっと拡大」を表現するCSSをご紹介します。
簡単にちょっとおしゃれなサイトになりますので、ぜひ取り入れてみてください！
使う言語
- HTML
- CSS
一応HTMLも書いていますが、実質CSSだけです。
コピペでサクッと作っちゃいましょう！
コード
今回のコードがこちらです。
.image {
overflow: hidden;
}
.image img {
display: block;
transition-duration: 0.3s;
}
.image img:hover {
transform: scale(1.3);
transition-duration: 0.3s;
}
これだけ！簡単！
HTMLには、画像の親要素にimageクラスを追加してください。
軽く解説
今回のコードの役割は以下です。
- :hoverで拡大サイズと動きの速さを指定
- imgで動きの速さを指定
- .image子要素の画像が拡大するのではみ出た分は隠す！
だいたい上記のイメージです。
transform: scale(1.3);の数字部分を変更すれば、拡大率を変更することができますよ。
数字部分を色々変更してみて、お気に入りの動きを見つけてください！
それでは以上ですm(__)m
