Tried a lot of container to try and right text above these images but with no succes

   <form class="image-row">
        <input type="image" formaction="{% url 'Bola:sondagens' %}" src="{% static 'Bola/noticias_imagens/pinto_costa.png' %}"/>
        <input type="image" formaction="{% url 'Bola:sondagens'  %}" src="{% static 'Bola/noticias_imagens/pinto_costa.png' %}"/>
        <input type="image" formaction="{% url 'Bola:sondagens'  %}" src="{% static 'Bola/noticias_imagens/pinto_costa.png' %}"/>
        <input type="image" formaction="{% url 'Bola:sondagens' %}" src="{% static 'Bola/noticias_imagens/pinto_costa.png' %}"/>
        <input type="image" formaction="{% url 'Bola:sondagens' %}" src="{% static 'Bola/noticias_imagens/pinto_costa.png' %}"/>
        <input type="image" formaction="{% url 'Bola:sondagens' %}" src="{% static 'Bola/noticias_imagens/pinto_costa.png' %}"/>
        <input type="image" formaction="{% url 'Bola:sondagens' %}" src="{% static 'Bola/noticias_imagens/pinto_costa.png' %}"/>
        <input type="image" formaction="{% url 'Bola:sondagens'  %}" src="{% static 'Bola/noticias_imagens/pinto_costa.png' %}"/>
        <input type="image" formaction="{% url 'Bola:sondagens'  %}" src="{% static 'Bola/noticias_imagens/pinto_costa.png' %}"/>
        <input type="image" formaction="{% url 'Bola:sondagens' %}" src="{% static 'Bola/noticias_imagens/pinto_costa.png' %}"/>
    </form>

CSS

.image-row {
            margin-left: 300px;
            margin-right: 300px;
            display: flex;
            flex-flow: row wrap;
        }

        .image-row input:nth-child(6n+1), .image-row input:nth-child(6n+2), .image-row input:nth-child(6n+3), .image-row input:nth-child(6n+4) {
            width: 31.5%;
            object-fit: cover;
            margin-right: 10px;
            margin-bottom: 10px;
            border-top: 3px solid red;
        }
        .image-row input:nth-child(6n+5) {
            width: 66%;
            object-fit: cover;
            margin-right: 10px;
            margin-bottom: 10px;
            border-top: 3px solid red;
        }
        .image-row input:nth-child(6n) {
            width: 100%;
            margin-right: 10px;
            margin-bottom: 10px;
            object-fit: cover;
            border-top: 3px solid red;
        }

Used form because all these images have actions and that was the only way to maintain the layout

Possible to create a container for each of these images to write text over them? I need to write text over all the images

Ps: the number of images changes constantly so I cant use position absolute

0 Answers