フリーランスwebデザイナーのwebデザインブログ

ちいさなwebデザインブログCHIIWEB BLOG

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

hoverで画像が大きくなるやつ

ハロハロ〜!

Marieです。

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

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

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

(やる気メラメラ)

この記事を書いている人

Marie

Marie

  • フリーランスwebデザイナー&講師
  • 2児ママ
  • 制作会社・インハウスデザイナーを経験し独立
  • オンラインwebデザイン教室ちいウェブ運営
  • 仕事の合間の息抜きに植物を育てています♡
もっと詳しくみる

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

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

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

↑これですね^^

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

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


コメントを残す

CAPTCHA


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

ドメインとサーバーはエックスサーバーで一括管理が便利♪

ドメイン取得↓

サーバー契約↓

関連記事