*当記事の内容は、カラーミーSEO+テンプレートver.2.2.3以降標準で実装されています。他テンプレートご利用の場合、ID名やクラス名を適宜調整して応用してください。
トップページのおすすめ商品やランキング、カテゴリーページなど、一覧表示される商品画像にマウスを重ねるとポップアップ(↓の 「くわしく見る」)が出てくるカスタマイズです。
CSSの編集となりますので、あらかじめバックアップをとり、失敗しても戻せるようにしておいてください。
ポップアップ表示のCSS追記
以下をコピーし、style.cssに追記。
.list li > a { display: block; position: relative; overflow-y: hidden; } .list li > a:after { content: "くわしく見る"; display: block; width: 100%; height: 100%; font-size: 1.8rem; font-weight: bold; color: #fff; padding-top: 30%; background: rgba(0,0,0,.5); position: absolute; bottom: -100%; left: 0; transition: .5s; box-sizing: border-box; } .list li > a:hover::after { transform: translateY(-100%); }
トップページのおすすめ商品だけに適用したい場合は、
.list li > a:after
を
#osusume .list li > a:after
とすれば、おすすめ商品にだけポップアップが適用されます。
「くわしく見る」のテキスト部分(contentの部分)は他の文言でも画像を表示させるでもご自由に変更してください。