Как отобразить данные, хранящиеся в модели Django, с помощью стилей CSS?

У меня есть цикл for для отображения изображения, названия и описания из модели Django, и он работает хорошо. но я хочу, чтобы название и описание отображались как наложение на изображение. Есть ли способ сделать это?

Этот код отображает данные:

<div class="tz-gallery">
    <div class="row">
        {% for service in services %}
        <div class="col-sm-6 col-md-4">
            <h6 class="text-center">{{service.title}}</h6>
            <a class="lightbox" href="{{service.image.url}}">
                <img src="{{service.image.url}}" alt="Park">
            </a>
            <p>{{service.content}}</p>
        </div>
        {% endfor %}
    </div> 
</div> 

И я хочу, чтобы service.title и service.image.url отображались с этим стилем css во время итераций цикла for

.tz-gallery .lightbox:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: rgba(46, 132, 206, 0.7);
    content: '';
    transition: 0.4s;
}

.tz-gallery .lightbox:hover:after,
.tz-gallery .lightbox:hover:before {
    opacity: 1;
}

Как я могу это сделать?

Вернуться на верх