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

10-07-11

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

demo

Aパターン

Bパターン

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;
}