矩形の中にマウスを置くと画像が表示される。

HTML定義

CSS定義

CSSの擬似クラス :hover を定義する。hover（マウスオーバー）を契機として、CSSの宣言ブロックが有効となる。

擬似クラス（.hover_place）の後ろにクラス名（.thum_image）を指定した場合、その要素が、擬似クラスの要素の子であれば、CSSの宣言ブロックは、その要素に対する宣言となる。

画像の表示位置は、親要素の矩形の原点（左上）からの距離となる。

HTML定義

CSS擬似クラス（hover_place）と画像を表示するクラス（thum_image）が親子ではなく、並列している。

CSS定義

クラスが並列関係にある場合、:hoverの後ろに指定するクラス名（.thum_image）は、＋記号で連結する。

また、画像を表示する位置は、ブラウザの表示領域の原点（左上）からの距離を指定する。これは絶対的な位置になるので、例えばグリッドのようにページの大きさにより要素の表示位置が変化する場合は、画像の位置とズレが生じる。こちらの方式はそこが欠点といえる。