ホバーしたテーブル行のサムネイルをちょっとだけ拡大PopupするCSS

経緯

昔実験的なコードを置いてた某サイトが繋がらなくなって、Codepenに引っ越ししました。
最近、CodepenのpenをQiitaに張り付けられることを知ったので、古いネタですがついでに解説を付けてみようと思いました。

テーブルの各行にサムネイルがありますが、マウスを重ねた行はちょっとだけ画像が大きくなって飛び出したように表示されます。

文字の高さに合わせて画像を縮小すると小さすぎてよくわからない、でもサムネイルのためだけに行の高さを増やすのはスペースの無駄づかいになる、そんな時に便利かと。
ちなみに CSS only で、Javascript は使ってません。

See the Pen Zoom in image inside table on hover. [css-only] ホバーで拡大するアイコン by ShinodaNaoki (@shinodanaoki) on CodePen.

解説

HTMLソースの方は、特に何の変哲もない table です。css セレクタのためにサムネイル画像をラップする div タグには "thumb" クラスが付いてます。

通常時のスタイル

まず通常状態の thumb クラス

div.thumb {
    position: relative;
    z-index: 0;
    margin: -0.2em;
}

img タグに position:absolute を使うための起点として、 position:relative を指定してます。それとホバーした画像が重なり順で上にでるように z-index:0 を指定してます。 margin: -0.2em は中の img タグが 1.2em と若干行高さより大きい分を吸収する役目です（これがないとホバーの有無で行高さが変わってガクガクする）。

そしてサムネイル画像のスタイル

div.thumb img {
    width: 1.2em;
    height: 1.2em;
    object-fit: cover;
}

1.2em は通常時の画像サイズなので、お好みのデザインに合わせて調節してください。object-fit: cover; は画像の縦横比を維持して矩形の中一杯のサイズで表示する指定です。お好みで contain などの指定をするのもありでしょう。

ホバー時のスタイル

CSSは、詳しい人には解説不要でしょうが、hover疑似クラスを使ってます。一般的な css セレクタの後に :hover と付けて書くと、マウスを重ねた時専用のスタイルを指定できるものです。

ホバー中の thmub クラスのスタイルは、重なり順で他の要素より上に来るように z-index を変えてるだけです。

tr:hover div.thumb {
    z-index: 9999;
}

そして、肝となるホバー時の画像タグのスタイルはこれ。:hover 疑似クラスが tr に対して付いてることにご注意ください。これによって、画像だけでなく テーブル行全体のどこにマウスをかざしてもこのスタイルが適用される ことになります。

tr:hover div.thumb img {
    width: 2.4em;
    height: 2.4em;
    display: block;
    position: absolute;
    top: 0%;
    left: 25%;    
    margin: -0.7em;
    box-shadow:0px 0px 16px 1px #000000;
}

2.4em はホバー時のサイズですので、お好みで変えてください。
display: block; position: absolute; でその場で他の要素に重なるように表示されます。
top, left, margin などもホバー時の表示位置に係わってきますので、適宜調整してください。
目立たせるために box-shadow を付けてます。

おまけ

HTML/CSS の img タグのところ svg やほかのタグに置き換えて使用することもできます。