商品一覧リストにポップアップをつける
＊当記事の内容は、カラーミー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の部分）は他の文言でも画像を表示させるでもご自由に変更してください。