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

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

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