トップページのおすすめ商品やランキング、カテゴリーページなど、一覧表示される商品画像にマウスを重ねるとポップアップ(↓の 「くわしく見る」)が出てくるカスタマイズです。
カラーミーテンプレートSEO Plus
29,800円
SEO Plusテンプレートバージョン2.3以前には標準で実装していたのですが、3.0以降はずした装飾なので、必要な方がいるかも、と記載しておくことにします。
CSSの編集となりますので、あらかじめバックアップをとり、失敗しても戻せるようにしておいてください。
ポップアップ表示のCSS追記
以下をコピーし、「１・共通」のcss編集スペースに追記すればOKです。
@media (min-width:980px){
.list-item .imgBox::after {
content: "くわしく見る";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: rgb(0,0,0,.7);
font-size: 18px;
font-weight: 600;
color: #fff;
transform: rotateX(-90deg);
transform-origin: bottom;
}
.list-item .imgBox:hover::after,
.list-item .imgBox:focus::after{
transform: rotate(0);
}}主要な各リストごとにIDを振り当てているので、おすすめ商品なら#osusume .list-item〜のようにしてやると、一部のリストにだけ適用できます。
「くわしく見る」のテキスト部分（contentの部分）は他の文言でも画像を表示させるでもご自由に変更してください。
