横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
画像サイズの拡大とキャプションの回り込み
画像(class="photo03")の上にマウスをオーバー(.photo03
a:hover)すると
画像のサイズを拡大し表示( overflow: visible;)する。
cssの書き方 |
/*------------------------------------------------------- 02-11 キャプションの回り込みとデザイン -------------------------------------------------------- */ #interview{ padding: 50px 0 100px 0; width: auto; background-image: url("../images/fes_bg.gif"); background-repeat: repeat; height:800px; } .ivbox_180{ clear: both; width: 680px; margin: 0 0 30px 10px; background-image: url("../images/fes_bg.gif"); background-repeat: repeat; } /* photo01 ,02 */ .photo01{ float: left; width: 300px; } .photo02{ float: right; width: 200px; } /* photo03 */ .photo03{ float: left; width: 200px; } .photo03 a{ position: relative; display: block; width: 200px; height: 240px; overflow: hidden; } .photo03 a img{ position: relative; top: -50px; left: -50px; } *html .photo03 a img{ /*for IE6 hack*/ position: absolute; } .photo03 a:hover{ overflow: visible; z-index: 3; } |
---|---|
HTMLの使用例 |
<div id="interview"> <div class="ivbox_180"> <p class="photo03"><a href="#"><img src="images/fes_photo01.jpg" alt="" /></a></p> <dl class="talk01"> <dt>横浜Festival 実行委員会<strong>おおさわ しずえ</strong></dt> <dd> 1980年生まれ。省略 ・・ </dd> </dl> </div> <div class="ivbox_180"> <p class="photo02"><img src="images/fes_photo02.jpg" alt="" width="200" height="240" /></p> <dl class="talk02"> <dt>横浜タウンの<br />住民が集まる<br />イベントを<br />やりたい!</dt> <dd>文字列・・ </dd> </dl> </div> <div class="ivbox_180"> <p class="photo03"><a href="#"><img src="images/fes_photo03.jpg" alt="" /></a></p> <h4>お子様も学生も大人もお年寄りも</h4> <dl class="talk03"> <dt>編集部</dt> <dd> はじめまして。 </dd> <dt>おおさわ</dt> <dd> もう5年になりますね。 </dd> --- 省略 --- </dl> </div> </div> |