Question

对于收集页面（https://bloomthis.co/collections/on-demand-blooms），当每个产品悬停时，将显示备用图像。备用图像是产品页面中添加的最后一张图像。

我正在努力进行＆＃34;立即购买＆＃34;替代图像顶部的按钮。目前，当我将鼠标悬停在缩略图上时，我可以看到备用图像一瞬间，按钮是＆＃34;爆炸＆＃34;按照网格大小调整为完整大小。

我想要的是让按钮位于备用图像的顶部而不覆盖整个缩略图区域。像这样：

Liquid Code （按钮位于<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;
  }
}

是否可以有三个＆＃34;叠加＆＃34; （原始图像，替代图像，按钮）？

Answer 1

我不确定但是尝试将宽度从auto更改为200px并添加一个高度：宽度低于100px到.btn类。这应该让你更接近你想要的结果，还有一些其他的步骤，但我很好奇这是什么，然后再引导你。让我知道！

Answer 2

您需要绝对定位按钮并在底部放置尺寸。应用此CSS样式使其如下图所示：

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

＆＃34;立即购买＆＃34;按钮涵盖整个产品缩略图

2 个答案: