实施网格问题

Question

在shopify主页图片网格中，我想在每张图片的顶部叠加一些内容：例如在蓝色衬衫2文本div（TEXTLINE 1和TEXTLINE 2）和1图像之上。当我添加文本行时，一切看起来应该是：

但是，当我包括图像（白花）时，父图像被放大。 TEXTLINE 2有标记cta文本和图像cta-image

这是我的CSS：

.tile-group {
  position: relative;
  overflow: hidden;
  .tile { display: none; }
  .tile.loaded {
    position: absolute;
    display: block;    
  }
  img {
    width: 100%;
  }
  a {
    display: block;
    @include vendor-prefix(transition, opacity 300ms);
    &:hover {
      opacity: $image-hover-opacity;
    }
  }

  .overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    &:before {
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
      margin-left: -5px;
    }
    .inner {
      @extend h4;
      color: $home-tile-text-col;
      margin: 0;
      padding: 0;
      display: inline-block;
      vertical-align: middle;
      width: auto;
      padding: 20px 25px;
      @if $home-tile-text-bg-col != transparent and $home-tile-text-bg-col != rgba(0,0,0,0) {
        background: rgba($home-tile-text-bg-col, $home-tile-text-bg-transparency);
      }
      .cta-text{
        width: 30%;
        position: absolute;
        font-size:24px;
        left:35%;
        bottom: 5%;
       	text-transform: uppercase; 
      }
      .cta-image{
        width: 30%;
        position: absolute;
        left: 35%;
        bottom: 10%;
      }
    }
  }
}

<div class="tile">
  {% if settings[url_idx] != empty %}<a href="{{ settings[url_idx] | escape }}">{% endif %}
  <img src="{% comment %}ly_asset_replace_for_[ filename | asset_url ]_begin{% endcomment %}{% assign ly_asset = filename %}{% include 'ly-asset' with ly_asset %}{{ ly_translation  }}{% comment %}ly_asset_replace_end{% endcomment %}" alt="{{ settings[alt_idx] | escape }}" />
  {% if settings[overlay_idx] != blank %}
  <div class="overlay">
    <div class="inner">
      	{{ settings[overlay_idx] }}
		<div class="cta-image">
      		{{ "lotos.png" | asset_url | img_tag:"CTA Image" }}
		</div>
      	<div class="cta-text">
      		{{ settings[cta_text] }}
    	</div>
    </div>


  </div>
  {% endif %}
  {% if settings[url_idx] != empty %}</a>{% endif %}
</div>

{% endcapture %}
{% endif %}
{% endfor %}


<section class="border-top section tile-section">
  <div class="container">
    <div class="tile-group">
      {{ img_tiles_html }}
    </div>
  </div>
</section>

Outputted HTML is here

如何让网格在屏幕截图1中运行？