Как избавиться от пустого пространства после использования position: relative?

Ребят, всем привет.

Какая задача: Сделать блок из 6 картинок, на каждой картинке сделать полупрозрачные стикеры, под картинкой сделать тайтл.

Какая проблема: Я оформляю стикер обычной надписью и поднимаю его в картинку через position: relative. В итоге появляется пустое место, от которого я не могу избавиться.

Мои данные:

<div class="small-12 medium-6 large-4 columns"> /* Класс Foundation */
    <img class="emotion_img" src="{% static "imagination/img400.jpg" %}"/>
    <h5 class="emotion_title"><span class="headliner_title_text">Популярное</span></h5>
    <p class="emotion_textimg">Как познать истину и стать владыкой всего живого</p>
</div>

.emotion_img{
    margin: 1rem 1rem 1rem 0;
    border: 1px;
    border-style: solid;
    border-color: #f49638;
}

.emotion_textimg{
    position: relative;
    top: -3rem;
    color: #528ebd;
    font-weight: bold;
}

.emotion_title{
    position: relative;
    top: -3rem;
    height: 2rem;
    font-weight: bold;
    background-color: #f49638;
    opacity: 0.9;
    vertical-align: middle;
}

Можно с этим как-то справиться или есть какой-то другой способ создания таких стикеров?