マウスオーバーで画像サムネイルを表示するCSS

top ＞ 2019 ＞ 1007_CSS_thumb

tkp_U-pmxw2-lrha4WQoriJ.png

こんなのをやろうとした時のメモ。

CSS側

a.linkImg:hover {
    position: relative;
    text-decoration: none;
}
a.linkImg span {
    display: none;
    position: absolute;
    top: 2.5em;
    left: 20px;
}
a.linkImg:hover span {
    border: none;
    display: block;
    width: 210px;
}

HTML側

<a href="http://www.example.com/" class="linkImg"><span><img src="img/thumb.jpg"></span>

CSSのtop:2.5emの所、最初は1emだったのですが、リンクのすぐ下にピッタリくっついてしまうので画像がポップアップした後にマウスカーソルをそのまま下に下すとリンクから外れてもカーソルがポップアップ画像の上にいるうちは消えてくれず、結構邪魔だなと感じました。そこでここの間隔を2.5em程度空けました。file参考画像

一番下の所でこのポップアップをやると最下部から画像がはみ出してしまい、うまく見れないといった問題もありますが、まぁ、サムネイルだし、いいかな。という気持ち。

top ＞ 2019 ＞ 1007_CSS_thumb