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

＊当記事の内容は、カラーミーSEO+テンプレートver.2.2.3以降標準で実装されています。他テンプレートご利用の場合、ID名やクラス名を適宜調整して応用してください。

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

CSSの編集となりますので、あらかじめバックアップをとり、失敗しても戻せるようにしておいてください。

INDEX

ポップアップ表示のCSS追記
1. カラーミーショップについて

ポップアップ表示の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%);
}

トップページのおすすめ商品だけに適用したい場合は、