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

*当記事の内容は、カラーミー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の部分)は他の文言でも画像を表示させるでもご自由に変更してください。

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください