Issue with implementing a grid - html

Question

Within an shopify homepage image grid I'd like to overlay a number of things on top of each image: e.g. on top of the blue shirt 2 text divs (TEXTLINE 1 and TEXTLINE 2)and 1 image. When I add the text lines everything looks as it should:
But, when I include the image (white flower) the parent image is enlarged. TEXTLINE 2 hast the markup cta-text and the image cta-image
This is my 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
How can I get the grid behave as in screenshot 1?