【css】hover(マウスオン)で画像を大きくする
マウスオンした時に、画像を大きくする方法を紹介します^^
このブログの一覧ページに使ってるやつですね。
マウスオンすると、画像が拡大されたみたいに見えるやつです。
↑これですね^^
マウスオンしてみてください。
例えば、htmlが以下のようにあったとします。
<div class="box">
<a href=”#”>
<img src=”img.jpg” alt=””>
</a>
</div>
これに対して、「transform」と「scale」を使用して画像を拡大させます。
a:hover img {
transform: scale(110%);
}
transformは、簡単に言えば「変形」です。
scaleは「大きさ」と覚えたらOKです^^
imgの親要素に、overflow: hidden;を指定することで、中の画像だけ拡大することが可能です!
今回の場合は、「.box」にoverflow: hidden;を入れるとOKですね^^
hoverは、マウスオンした時の指定です。
transform: scale(110%);と指定することで、マウスオンすると、サイズを110%に大きくする形になります。
ここで、合わせて指定したいのが「transition」です。
これを指定していないと、マウスオンした時の動きが瞬間的なんですね。
imgに、transition:を指定しておきましょう。
どのくらいの時間をかけて、動きを実行したいかです。
img {
transition: .5s;
}
だと、0.5秒です。
transitionは、動きを指定する「元」の要素に書いておきます。
なので今回の場合は「img」に記述します^^
a:hover に動きをつけるときは、「a」にtransitionを記述します♡
これだけで、マウスオンすると拡大するような画像が実装できます
ぜひ試してみてくださいね♪
\Instagramでも投稿中/
いいなと思ったら
TAPしてね♡↓
【css】画像を角丸にする ウインドウサイズを”大きくしたのに”【カラム落ち?】その原因とは
コメントは承認後に表示されます。