Help us understand the problem. What is going on with this article?

ホバーしたテーブル行のサムネイルをちょっとだけ拡大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 やほかのタグに置き換えて使用することもできます。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away