<div class="category-wall">
<h3 class="title">{{ text_category }}</h3>
<div class="row">
{% for category in categories %}
<div class="category-item col-lg-3 col-md-4 col-xs-6" style="background-image:url({{ category.image }})">
<a href="{{ category.href }}">{{ category.name }}</a>
</div>
{% endfor %}
</div>
</div>

<style>
.category-wall {
margin: 50px auto;
}

.category-item {
position: relative;
height: 250px;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
border: 5px solid #fff;
}

.category-item a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: none;
align-items: center;
justify-content: center;
outline: 2px solid #fff;
outline-offset: -25px;
background-color: rgba(15, 62, 91, 0.3);
font-size: 20px;
color: #fff;
font-weight: 900;
padding: 30px;
}

.category-item:hover a {
display: flex;
transition: 1s ease-out;
transition-delay: 1s;
}
</style>
