Web制作の技術情報を中心に、WordPress、jQuery、CSSなどの情報など幅広く発信中。Web制作スキルや知識のアウトプットブログです。

Sedori Plan

Web

CSSだけで画像をマウスオーバーすると拡大する方法

投稿日:

画像をマウスオーバーすると画像が拡大するボタンをよく見かけます。

例題: FOX International Channels

左上の画像にマウスを当てると
ウォーキング・デッド

↓↓↓

拡大します。

ウォーキング・デッド

URLhttp://foxinternationalchannels.com/shows/the-walking-dead

やり方は色々ありますが今回は簡単にマウスオーバーすると画像が拡大する方法をご紹介いたします。

HTMLを設置します STEP1

画像のパスは自分の環境に合わせてください。

<div class="img-mouseover">
<a href="#" target="_blank">
<img src="images/016/01.jpg" width="150" height="150">
</a></div>

CSSを書く STEP2

.img-mouseover{
	width: 150px;
	height: 150px;
	overflow: hidden;
	margin-bottom: 15px;
	}

.img-mouseover img {
	transition: 0.5s;
}

.img-mouseover img:hover {
  -moz-transform: scale(1.2,1.2);
  -webkit-transform: scale(1.2,1.2);
  -o-transform: scale(1.2,1.2);
  -ms-transform: scale(1.2,1.2);
  opacity: 0.4;
  
}


a{
    background-color:#000;
    display:block;
}

まとめ STEP3

[サンプル] CSSだけで画像をマウスオーバーすると拡大する方法

サンプルのソースをコピーしても画像が絶対パスではないのでご自身の環境で画像を用意して画像を差し替えるだけで動きます。簡単に出来るので挑戦してみてください!

スポンサーリンク
  • この記事を書いた人
  • 最新記事
しん

しん

Webサイトの構築、プログラムを制作しています。中小企業、個人のホームページの制作、更新作業も承ります。 仕事以外はバスケをしたり、ジムで筋トレしております。 映画/海外ドラマ/プログラミング/バスケ/トレーニング/カナダ/カメラ・写真

-Web

Copyright© Sedori Plan , 2019 All Rights Reserved.