[PR] 不動産担保ローン マウスオーバーすると元画像サイズで表示させる方法 only css | 素人ときどき玄人
<< 独自ドメインの設定 for concrete5 | main | Firefox10で観覧すると表示が切れるぞ。 >>
スポンサーサイト

一定期間更新がないため広告を表示しています

カテゴリ:- | | - | - | -
マウスオーバーすると元画像サイズで表示させる方法 only css
JUGEMテーマ:ウェブデザイナー

マウスオーバーで画像の拡大を表示させる場合、
サムネイル用の画像と元画像と、
2枚の画像を作らないとならないのはなかなか手間ですよね?



これが1枚の画像で、さらにCSSだけで出来ちゃう方法があるって知ってました?

HTML

<div class="sub">
  <a href="#"><span class="mainImage"><img src="画像のパス"></span></a>
</div>
<div class="sub">
  <a href="#"><span class="mainImage"><img src="画像のパス" onclick="window.open('画像のパス)"></span></a>
</div>

※オレンジの部分は画像をクリックした時、拡大画像を別ウィンドウで表示したい場合に追加してください。
 端の方になってくると拡大画像がウィンドウ内に収まらない場合があるので、そんな時便利です。


CSS

.sub {
  float:left;
  width: 175px;
  margin: 0 7px 0 0;
  text-align:center;
}

.sub img {
  padding:4px;
  border:1px solid #D1D1D1;
  width:160px;
}
   
.sub a { display: block; }
.sub a:hover { position: relative; }
.sub a:hover .mainImage { display: block; }
.sub a:hover .mainImage img {
    width: auto;  height: auto;
}   

※太字部分は変更せずにお使い下さい。


これだけでOK!
お試しあれ。


【参考サイト】
CSS-EBLOG
CSSだけで作るマウスオーバーでの画像の拡大
カテゴリ:css | 03:46 | comments(0) | trackbacks(0) | -
スポンサーサイト
カテゴリ:- | 03:46 | - | - | -
コメント
コメントする









この記事のトラックバックURL
http://befine.jugem.jp/trackback/122