10-07-11

オンマウスで画像をピョコンと表示させる

demo

Aパターン

東欧雑貨のpicnika(ピクニカ)

Bパターン

東欧雑貨のpicnika(ピクニカ)

memo

作業内容

DB - KAYAC Designer's Blog(カヤック デザイナーブログ)を見ていると、サムネイル画像にオンマウスした際キャラクターがピョコンと飛び出してくるではありませんか。初めて見た時「えぇなぁ!それ、えぇなぁ!」と思ったのですが、あれから2年くらい経った今、試してみることにしました。

Aパターン、Bパターンとありますが、Aパターンは少なくともIE6ではピョコンと出てきません。ボックス幅を超えても表示させるため、Bパターンはpositionを使っています。

--- htmlはこんな感じ ---
<p class="linkchara">
 <a href="http://picnika.net/">
  <img src="img/100711/img_picnika.jpg" width="179" height="137" alt="" />
 </a>
</p>

--- CSSはこんな感じ ---
.linkchara{
 margin-left:-30px;
}
.linkchara a{
 width:185px;
 display:block;
 padding-left:30px;
 position:relative;
}
.linkchara a:hover{
 background:url(img/100711/img_linkbgL.gif) no-repeat left bottom;
}
.linkchara a img{
 padding:2px;
 background:#fff;
 border:#ccc 1px solid;
}
.linkchara a:hover img{
 padding:2px;
 border:#2c95d7 1px solid;
}
otani-webs.com / PozuPad / Copyright © 2010 LabPad All Rights Reserved.