株式会社アイネックスはソフトウェアの開発、ホームページの作成ツール企業です。

　　　　　横浜、東京に拠点を置き、検証システム／金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。

galleria

02-11）　1. 画像サイズの拡大とキャプションの回り込み

　

画像サイズの拡大とキャプションの回り込み

画像(class="photo03")の上にマウスをオーバー(.photo03 a:hover)すると
画像のサイズを拡大し表示( overflow: visible;)する。

ｃｓｓの書き方 /*-------------------------------------------------------
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>

横浜Festival 実行委員会おおさわ しずえ
1980年生まれ。広告代理店時勤務。「やまびこロックフェスティバル」「夕焼けガールズコレクション」「せせらぎアートフェスティバル」など多くのイベント企画・運営に携わる。 横浜タウン住民として、ボランティアで横浜Festivalプロジェクトを進める。

横浜タウンの
住民が集まる
イベントを
やりたい！
横浜タウンは新しい街なので、地元のお祭りや地元の行事がほとんどありませんでした。これだと、街の中に活気が生まれないというか、 そのひとの持っているコミュニティを超えた、地元のつながりが生まれないと感じていました。。あるとき思ったんです。 だったら、自分で作ってしまおうと。新しい街にふさわしい新しいお祭りを。横浜タウンの住民が集まるイベントをやりたい！って。 ここまでくるのに1年かかりましたが、ようやく横浜タウンのみなさんにご案内できるようになりました。

お子様も学生も大人もお年寄りも

編集部
はじめまして。今日はよろしくお願いします。おおさわさんが横浜タウンに住むようになったのはいつ頃からですか？
おおさわ
もう5年になりますね。まだまだ街は整備されていなかったのですが、横浜公園といい、都心とは思えないこの環境にひと目惚れでした。
編集部
おおさわさんイチオシのイベントはなんでしょうか？
おおさわ
横浜を見ながらの映画鑑賞会じゃないですかね。夏の夜のなか、芝生に座って映画を見る。なかなかできる経験ではありませんよ。 今回は映画会社の方にご協力いただき、新作映画の試写会というカタチで実現することが出来ました。だから、本当に当日のお天気が心配なんです（笑）
編集部
どんな方に参加してもらいたいですか？
おおさわ
横浜タウンには様々な世代の方が住まわれています。結婚して子どもが出来たばかりのカップル、定年退職を迎えられ新しい街で新しいスタートをした夫婦など。 だからお子様も学生も大人もお年寄りも、みんなが楽しめるお祭りにしたいと思っています。