webデザイン・コーディングに役立つ情報、WordPressカスタムに使えるHTML・CSSコピペ用コード、Canva無料テンプレートなどをご紹介します♩

chiweblogちいウェブログ

【css】hover(マウスオン)で画像を大きくする

この記事を書いている人
Marie

Marie

  • フリーランスwebデザイナー&講師
  • 制作会社・インハウスデザイナーを経験し独立
  • オンラインwebデザイン教室ちいウェブ運営
  • 仕事の合間の息抜きに植物を育てています♡
  • スプラ・DIY・将棋がすき
  • 小4・年長の母

マウスオンした時に、画像を大きくする方法を紹介します^^

このブログの一覧ページに使ってるやつですね。

マウスオンすると、画像が拡大されたみたいに見えるやつです。

↑これですね^^

マウスオンしてみてください。

例えば、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してね♡↓

コメントする

CAPTCHA


コメントは承認後に表示されます。

Home Webデザイン コーディング コピペ用コード 【css】hover(マウスオン)で画像を大きくする

関連記事

更新通知を受け取る

不定期更新の為、
メールにて更新お知らせを
お送りいたしますlove letter

(更新通知以外のメールは
お送りしませんので
ご安心ください)