CUTPLAZA TERMINAL

CSSのOverflowを応用して画像を綺麗にリサイズ表示するサンプル。

CSSのOverflowを応用して画像を綺麗にリサイズしサムネイル風の表示を行う事が出来る。

Create Resizing Thumbnails Using Overflow Property | Css Globe
CSSのOverflowを応用して画像を綺麗にリサイズ表示するサンプル:phpspot開発日誌より

<p class="thumb"><a href="http://cssglobe.com/"><img src="image.jpg" /></a></p>

スポンサード リンク

※サンプルは配置指定の値を変えています。

そして、次のCSSを適用。

p.thumb{ 
    float:left; 
    margin:.5em 0; 
    margin-right:10px; 
    border:1px solid #999; 
    padding:2px; 
} 
p.thumb a{ 
    display:block; 
    float:left; 
    width:100px; 
    height:100px; 
    line-height:100px; 
    overflow:hidden; 
    position:relative; 
    z-index:1; 
} 
p.thumb a img{ 
    float:left; 
    position:absolute; 
    top:-20px; 
    left:-50px; 
} 

/* mouse over */ 

p.thumb a:hover{ 
    overflow:visible; 
    z-index:1000; 
    border:none; 
} 
p.thumb a:hover img{ 
    border:1px solid #999; 
    background:#fff; 
    padding:2px; 
} 

/* // mouse over */

大きい画像は配置指定の値を変えれば良さそう。

このあたりと
p.thumb a img{ 
    float:left; 
    position:absolute; 
    top:-20px; 
    left:-50px; 
} 
このあたり。
/* mouse over */ 

p.thumb a:hover{ 
    overflow:visible; 
    z-index:1000; 
    border:none; 
} 
p.thumb a:hover img{ 
    border:1px solid #999; 
    position:absolute; 
    top:-10px; 
    left:-10px; 
    background:#fff; 
    padding:2px; 
} 

/* // mouse over */ 

ちなみに「あまなつAdhover」のスタイルシートだと3行だよね。

市川由衣写真集『いちかわさん』(DVD付)市川由衣写真集『いちかわさん』(DVD付)市川由衣写真集『いちかわさん』(DVD付)あまなつAdhover 市川由衣写真集『いちかわさん』(DVD付)[写真・小]

Figma 涼宮ハルヒの憂鬱 涼宮ハルヒ 制服Ver.Figma 涼宮ハルヒの憂鬱 涼宮ハルヒ 制服Ver.Figma 涼宮ハルヒの憂鬱 涼宮ハルヒ 制服Ver.あまなつAdhover Figma 涼宮ハルヒの憂鬱 涼宮ハルヒ 制服Ver.[写真・大]

かなり雰囲気は似ているねぇ。

.img_adhover{top:-5000px; left:-5000px;position:absolute;}

a.a_adhover:hover {z-index:1000;position:relative;}

a.a_adhover:hover .img_adhover{top:16px; left:0px;}

実はこのスタイルシートを多用させていただいていたりする。

応用すると動くリンクボタンも作れる便利な技。

ただ、画像が大きすぎたりすると、

観覧する人にとって扱いづらい状況になりかねない事もあるね。

CUTPLAZA TERMINAL