これまで擬似要素を使った表現の記事をいくつか書きましたが、今回はお遊びになります。
マウスホバーなので、マウスカーソルを対象となる文字に合わせるのですが、スマホからでも文字を押す事で動作が確認できます。
擬似要素プラスhoverを使って文字周辺から画像を召喚する
とりあえず例として下の文面「この文字にホバー」に触れてみてください。
例：マウスを乗せると… この文字にホバー してみて。
このように画像を表示させることが出来ます。あまり多用するとWebサイトの表示スピードに影響がでてしまいますが、多少であれば問題ないと思われます（言い切れません）。
ミコトホドのグローバルメニューにも採用（03/26時点）してますが、そこでは表示方向を上と下に分けています。
擬似要素とhoverを使い、対象文字からの表示方法を解説していきます。
position: relative
マウスを乗せると… <span class="hover-summon">この文字にホバー</span>してみてここではセレクタをhover-summonにしています。これを起点に色々仕掛けていきます。
.hover-summon {
position: relative;
}position: relative; を設定すると、対象のセレクタの文字を中心とします。
通常、Webサイトの要素は上から順に流れるように配置されていきます。しかし、今回のギミックのように「文字の真上」や「真横」に画像を置きたい場合、「基準となる場所」が必要です。
relativeを書かない場合: 画像は「サイト全体の左上」を基準に動こうとします。relativeを書いた場合: その文字自体が「座標（0, 0）」の原点になり、画像は「その文字から見て上へ50px」といった相対的な移動ができるようになります。
擬似要素before / after
対象のセレクタに before を使います。after を使っても問題はありませんが、挿入箇所は以下の様になります。
::before= その要素の内容の「前」に挿入される。::after= その要素の内容の「後」に挿入される。
※「before」から書くのが通例な理由
慣習的に、1つしか擬似要素を使わない場合は ::before から使い始める人が多いです。これは単に「前（before）から順に埋めていく」という整理整頓の感覚に近いものです。
.hover-summon::before {
content: ""; /* ここは絶対、中身は空でOK */
position: absolute;
bottom: 10px; /* 文字の真上に配置 */
left: 50%; /* 左右中央に配置 */
transform: translateX(-50%); /* 左右中央に配置 */
width: 60px; /* 表示したい画像の幅 */
height: 60px; /* 表示したい画像の高さ */
background-image: url('img.jpg'); /* 用意した画像のパス */
background-size: contain;
background-repeat: no-repeat;
opacity: 0;
transition: all 0.3s ease; /* じわっと現れる演出 */
pointer-events: none; /* 画像自体はクリック不可にする */
}hover-summon::beforeに設定されたプロパティの解説をしていきます。
content
CSSのルールでは、::before や ::after といった擬似要素は、content プロパティが定義されていない限り、この世に存在（描画）されないという厳格なルールがあります。
content: "";がある時: 「中身は空（0文字）だけど、箱だけは作ってくれ」という命令になり、画像を表示する「器」が生成されます。contentを書かない時: ブラウザはその擬似要素を「無視」します。いくらサイズ（width/height）や背景画像を指定しても、1pxも表示されません。
position: absolute
このプロパティは擬似要素 before / after によって表示された画像や文字が隣接する何かの上に重なります。
つまりは、表示される画像や文字の表示場所が狭くても改行をする事もなく、または押し出してデザイン崩れをする事がなくなります。
position: relativeで作られた基準点から何者にも邪魔される事なく表示する事が出来るのです。
ただし、position: absoluteによって何かの上に重なるので、当然隣接するデザインに重なります。綺麗に見せたいなら表示エリアに余白を作らなければなりません。
bottom
よく見るプロパティですが、ここで決めた数値が画像の表示される最初の位置となります。値とパーセントでも設定出来ますが、ピクセルでも問題ありません。
人によっては 10px などの方が馴染みがあり、設定しやすいかもしれません。
leftとtransform: translateX
left と transform: translateX を使って表示画像の位置調整をします。
left
セレクタを設定した文字の左端から。
transform: translateX
画像の左端から。
left: 50%; と transform: translateX(-50%); で中央になるので、中央に表示したい場合はこの設定をしておけば問題ありません。
background-size: contain
これを設定することで、幅（width）か高さ（height）のどちらかの狭い方に合わせて、画像全体が完全に見える最大サイズまで自動調整します。
用意した画像を、1pxも切り捨てずに設定した場所に表示させたい時は background-size: contain; です。これさえ書いておけば、画像が縦長でも横長でも、歪んだりハミ出したりすることなく、綺麗に表示してくれます。
opacity
background-image: url(‘img.jpg’); に画像URLを書き込むと画像は表示されますが、 opacity の設定で透明にして潜伏状態にすることが出来ます。
opacity の数値ルール
0: 完全に透明。1: 完全に不透明。0.5: 半透明。
0.5: 半透明の使いどころしては、本音と建て前なんかで使うと面白いかもしれません。
cocoonは本当に素晴らしいテーマですよね（管理画面は重いし、キャッシュに融通が利かないのが使いにくい所ですが…）
と、このように文字色の設定ではなく、opacity: 0.5; の表示がデフォルト色より薄くなるのが分かります。
transition
この設定をする事で動きのあるアニメーションの様な表示が可能になります。
ここでは transition: all 0.3s ease; と設定してますが、値を変えて色々試してみると良いでしょう。
width / hieght
これは単純に表示させる画像サイズです。
background-repeat
no-repeatを設定して、表示させる画像を一つにします。
hover::before
ここでの設定は多くはありません。ほとんどが前のセレクタへの設定で終わります。
.hover-summon:hover::before {
opacity: 1;
margin-bottom: 5px; /* 少し浮き上がらせて着地させる演出 */
}opacityの値を 1 にします。
margin-bottom は設定した画像の表示位置から下に余白を作る事で、マウスホバー時にopacity: 1 の表示と同時に移動したように見せます。ホバーした時の画像からの距離となります。この設定がホバー時の最終表示位置になります。
.hover-summon::before の設定の bottom の値と差をつけると、transition: all 0.3s ease; の効果でアニメーション演出のようになります。
表示位置を下に変更
上記で紹介したCSSを元に、その他の表示方向の設定は以下の通りになります。
例：マウスを乗せると… ここの下へ表示 します。
.hover-summon::before に設定したプロパティの bottom を top に変更します。
.hover-summon:hover::before に設定したプロパティの margin をmargin-topに変更します。
各プロパティの数値を変えて表示の微調整をしてください。
表示位置を右に変更
例：マウスを乗せると…ここの右に表示します。
.hover-summon::before に設定したプロパティleft の値を100%にしてください。
margin-left を加えると表示開始位置の微調整ができます。
transform のキーワード指定を translateY(-50%) に変更します。X から Y に変更です。
.hover-summon:hover::before に設定したプロパティの margin 設定をmargin-left に変更します。
表示最終位置の微調整ができます。
各プロパティの数値を変えて表示の微調整をしてください。
表示位置を左に変更
例：マウスを乗せると… ここの左に表示 します。
.hover-summon::before に設定したプロパティleft をright に変更して値を100%にしてください。
transform のキーワード指定は translateY(-50%) です。
.hover-summon:hover::before に設定したプロパティmargin 設定をmargin-rightに変更します。
各プロパティの数値を変えて表示の微調整をしてください。
おまけ：マウスホバーで文字を出す
文字を出すときは content: ""; に文字を入れます。
width
height
background-image: url(‘img.jpg’)
background-size: contain
background-repeat: no-repeat
pointer-events: none
これらは必要ありません。
マウスを乗せると… ここから上に言葉が浮かびます。召喚するギミックの正体はopacityを使った透明化
タイトルには「文字に潜ませて」としてますが、正解は見えなくしているだけで、実際はページを開いた時からそこにいたのです。
非表示と言えば、display:none があります。あれを使って同じような事もできますが、セレクタをさらに作る必要があります。
今回紹介したCSSの方がシンプルではあります。
是非、隙間時間にでもご自分のWebサイトにギミックを仕込んでみてはいかがでしょうか。
コメント