リンク画像のホバー時に『リンク先を見る』の文字を表示する方法

もくじ

• 表示例
• HTMLコード
• CSSコード

表示例

HTMLコード

• • <a class="link-on-message" href="#sample"><img alt="サンプル画像" width="150" height="150" src="画像のURL"></a>

CSSコード

• • a.link-on-message{
  • position:relative;
  • display:inline-block;
  • width:150px;height:150px;
  • box-shadow:0 1px 4px 0 rgb(206,206,206), 0 0 0 1px rgb(216,216,216);
  • }
  • a.link-on-message:hover::before{
  • content:"リンク先を見る";
  • position:absolute;top:0;left:0;
  • width:150px;height:calc(150px / 3);
  • margin:calc(150px * 2 / 3) 0 0 0;
  • background:rgb(49,49,49);
  • color:rgb(255,255,255);
  • text-align:center;
  • line-height:calc(150px / 3);
  • filter:opacity(95%);
  • }
• 画像のサイズが縦150px横150pxの場合のCSSです。