在图像悬停时显示产品标题

问题描述

我一直试图让我们的产品标题出现在当您将鼠标悬停在图片底部底部的包含框内的产品图片上时。我们正在努力实现这一目标，而不是在图像本身的下方显示产品标题和价格。

我尝试了Shopify推荐的此CSS代码，但没有执行任何操作：

 <noscript>
    {% capture product_image_size %}{{ height }}x{% endcapture %}
    <div class="reveal">
    <img src="{{ featured_media | img_url: product_image_size,scale: product_image_scale }}" alt="{{ featured_media.alt }}" id="FeaturedMedia-{{ section.id }}" class="product-featured-media" style="max-width: {{ height }}px;">
       <div class="hidden">
       <div class="caption">
       <div class="centered">
       <p>{{ product.title }}</p>
       <p>{{ product.price | money }}</p>
       </div><!-- end of .centered -->
          </div><!-- end of .caption -->
         </div><!-- end of .hidden -->
    </div>
      </noscript>

当前产品标题存在的CSS只是就其位置而言似乎是：

  .grid--view-items {
    overflow: auto;
     margin-bottom: -35px; }

 .grid-view-item {
  margin: 0 auto 35px; }
  .custom__item .grid-view-item {
   margin-bottom: 0; }

 .grid-view-item__title {
  margin-bottom: 0;
   color: var(--color-text); }

.grid-view-item__meta {
 margin-top: 8px; }

@media only screen and (max-width: 749px) {
  .grid-view-item__title,.grid-view-item__meta {
   font-size: calc(((var(--font-size-base) - 1) / (var(--font-size-base))) * 1em); } }

.grid-view-item__link {
 display: block; }

.grid-view-item__vendor {
   margin-top: 4px;
   color: var(--color-body-text);
   font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em);
   text-transform: uppercase; }
     @media only screen and (max-width: 749px) {
     .grid-view-item__vendor {
     font-size: calc(((var(--font-size-base) - 3) / (var(--font-size-base))) * 1em); } }

如果有人对如何完成此工作有任何建议，请告诉我！目的是使鼠标悬停外观类似于此站点：https://www.lazyoaf.com/collections/men-new-in-1

解决方法

这是您可以使用的一种方法，我将html结构保持与原始结构接近。

当您下次提出问题时，如果提供实时代码段，例如将php转换为静态html等，则可能会更快地得到答案。

.reveal {
  width:500px;
  height:500px;
  background:red;
  position:relative;
  overflow:hidden;
}

.reveal img {
  object-fit:cover;
  width:100%;
  height:auto;
}

.reveal:hover .hidden{
  opacity:1;
}
.hidden {
  background:rgba(255,255,.5);
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  padding:1rem;
  box-sizing:border-box;
  transition:.8s ease;
  opacity:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

   
    <div class="reveal">
    <img src="https://via.placeholder.com/900/09f/fff.png" id="FeaturedMedia-{{ section.id }}" class="product-featured-media" style="max-width: {{ height }}px;">
       <div class="hidden">
       <div class="caption">
       <div class="centered">
       <p>{{ product.title }}</p>
       <p>{{ product.price | money }}</p>
       </div><!-- end of .centered -->
          </div><!-- end of .caption -->
         </div><!-- end of .hidden -->
    </div>