EC-CUBE4系で画像ホバー時にキャプションを表示する

EC-CUBE4系以外にも汎用的に使えるデザインtipsです。
商品一覧の画像にマウスを載せたホバー時に、テキストキャプションを表示します。
簡単ですが、少しリッチに見えるのでおすすめです。

仕組みは、画像の背景に黒色を設定し、擬似要素のbeforeで「詳細を見る」というキャプションを作成。
ホバー時に、画像を半透明にし、before要素を表示する事で、画像が暗くなりキャプションが浮き上がる仕組みです。

HTML追記

商品画像のimg要素をdivやp要素で囲み、class属性を追加します。
今回はu-item__captionというクラス名にしてますが、ご自身で変更可能。
トップページと商品一覧ページでは、記載場所が異なりますので、以下をご参考に編集ください。

トップページの新着商品ブロックに適用する

トップページは新着商品ブロックに記載するので、
管理画面の[コンテンツ管理]>[ブロック管理]>[新着商品]ブロックを編集してください。
デフォルトであれば、25行目、32行目、39行目あたりにimg要素があると思います。
img要素をdiv要素で囲みclass属性とclass名「u-item__caption」を追記してください。

<div class="u-item__caption">
  <img 〜〜〜>
</div>

商品一覧ページに適用する

商品一覧ページは、ページに記載するので、
管理画面の[コンテンツ管理]>[ページ管理]>[商品一覧ページ]を編集してください。
デフォルトであれば、152〜154行目あたりにp要素とimg要素があると思います。
こちらは、img要素の親にp要素があるのでそちらにclass名「u-item__caption」追加で大丈夫です。

<p class="ec-shelfGrid__item-image u-item__caption">
  <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}">
</p>

CSS追記

HTMLで指定したclassに、CSSでホバー時のスタイルを適用します。
CSSは管理画面のCSS管理か、直接cssファイルを編集されている方は、そちらのファイルに追記ください。
商品一覧ページには、画像の高さがバラバラだった場合の対策として、画像の高さを固定する値がデフォルトでは入っています。
こちらは今回autoにしていますので、画像の横幅と高さは揃えるようにしてください。

/*商品一覧ページ画像の高さの値をautoに変更*/
.ec-shelfGrid .ec-shelfGrid__item-image{
    height: auto;
}
/* hover時にキャプション表示するスタイル */
.u-item__caption{
    background: #000;/*画像の下に黒色の背景を置く*/
    position: relative;
    line-height:1;
}
.u-item__caption img,.u-item__caption::before{
    transition: 0.5s;/*ホバー時にフワッと表示する処理の秒数*/
}
.u-item__caption:hover img{
    opacity: 0.5;/*ホバー時に画像を半透明にする値*/
    z-index: 1;
}
.u-item__caption::before{
    content: "詳細を見る";/*キャプションテキスト*/
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    padding: 8px 5px;/*枠線とテキストの間の内余白*/
    border: 1px solid #fff;
    color: #fff;
    font-size: 1.2rem;/*テキストの文字サイズ*/
    width: 50%;/*キャプションテキスト枠の横幅*/
    text-align: center;
    transform: translate(-50%,-50%);
    opacity: 0;
}
.u-item__caption:hover::before{
    opacity: 1;
}

管理画面のCSS管理は、[コンテンツ管理] > [CSS管理]は以下になります。