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

Marieです。

最近、毎日1〜2時間は英会話学習の時間をとってるよ！

大体お昼休みと、寝る前に1時間ずつ＾＾

今回は絶対継続するよ！！！！！！！

（やる気メラメラ）

この記事を書いている人

Marie

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

もっと詳しくみる

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

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

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

↑これですね＾＾

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

例えば、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でも投稿中／

この投稿をInstagramで見る

A post shared by Marie | webデザイナー (@chiiweb_)