商品一覧リストにポップアップをつける

トップページのおすすめ商品やランキング、カテゴリーページなど、一覧表示される商品画像にマウスを重ねるとポップアップ(↓の　「くわしく見る」)が出てくるカスタマイズです。

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の部分）は他の文言でも画像を表示させるでもご自由に変更してください。