css - "Buy Now"按钮覆盖整个产品缩略图

Question

对于产品系列页面 ( https://bloomthis.co/collections/on-demand-blooms )，当每个产品悬停在上面时，会显示替代图像。备用图片是产品页面中添加的最后一张图片。

我正在努力在替代图像的顶部添加一个“立即购买”按钮。目前，当我将鼠标悬停在缩略图上时，我可以在一瞬间看到备用图像，并且按钮会按照网格大小“展开”到完整大小。

我想要的是让按钮位于替代图像的顶部，而不覆盖整个缩略图区域。像这样:

液体代码(按钮在<div class="reveal">)

  {% if product.title contains "Subscription" %}
    <a href="{{ product.url | within: collection }}" class="grid__image">
      <div class="reveal">
        <button class="btn--secondary btn--small">Send Now</button>
      <img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">
      <img class="hidden" src="{{ product.images.last | img_url: 'large' }}" alt="{{ product.images.last.alt | escape }}" />
      </div>
        </a>
    {% else %}
      <a href="{{ product.url | within: collection }}" class="grid__image overlay-box" onclick="">
      <div class="overlay" onclick="" rel="{{ product.title | handleize }}">

          <div class="reveal">
      <img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">
        <img class="hidden" src="{{ product.images.last | img_url: 'large' }}" alt="{{ product.images.last.alt | escape }}" />
      <button class="hidden btn--secondary btn--small">Buy Now</button>
      </div>

      </div>
      <img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">
    </a>
  {% endif %}

CSS

    //Reveal module
    .hidden { display: block !important; visibility: visible !important;}

    .btn {
      font-family: 'Playfair Display';
      letter-spacing: 2px;
      text-transform: uppercase;
      display: inline-block;
      padding: 8px 10px;
      width: auto;
      margin: 0;
      line-height: 1.42;
      font-weight: bold;
      text-align: center;
      vertical-align: bottom;
      white-space: nowrap;
      cursor: pointer;
      border: 1px solid transparent;
      @include user-select(none);
      -webkit-appearance: none;
      -moz-appearance: none;
      border-radius: $radius;

      /*======== Set primary button colors - can override later ========*/
      background-color: $colorBtnPrimary;
      color: $colorBtnPrimaryText;

      &:hover {
        background-color: $colorBtnPrimaryHover;
        color: $colorBtnPrimaryText;
      }

      &:active,
      &:focus {
       background-color: $colorBtnPrimaryActive;
       color: $colorBtnPrimaryText;
      }

      &[disabled],
      &.disabled {
        cursor: default;
        color: $disabledBorder;
        background-color: $disabledGrey;
      }
    }

    .btn--small {
      padding: 4px 5px;
      font-size: em(12px);
    }

    .btn--secondary {
  @extend .btn;
  background-color: $colorBtnSecondary;

  &:hover {
    background-color: $colorBtnSecondaryHover;
    color: $colorBtnSecondaryText;
  }

  &:active,
  &:focus {
   background-color: $colorBtnSecondaryActive;
   color: $colorBtnSecondaryText;
  }
}

是否可以有三个“叠加层”(原始图像、备用图像、按钮)？

Answer 1

您需要绝对定位您的按钮并在底部设置尺寸。应用此 CSS 样式使其看起来如下图所示:

.reveal .hidden.btn--secondary {
    position: absolute;
    bottom: 10px;
    width: auto;
    height: auto;
    left: 50%;
    transform: translate(-50%,-50%);
    top: auto;
    padding: 10px;
}