How to overlay an image in a for loop in Django

I’m trying to create an event page where admin can post events which will be edited or deleted from time to time. The idea is there are in cards and when the user click on the cards an image overlay will show up.
While in the past I have used HTML and JavaScript to create this overlay my problem now using a for loop in python.
This is my code:

<div class="row">
                {% for festival in festivals %}                        
                <div class="col-4">
                    <div onclick="on()" class="card">
                        
                            <img src="{{ festival.image_url }}" class="card-img-top" alt="{{ festival.name }}">
                        
                        <div class="card-body">
                            <h5 class="card-title">{{ festival.name }}</h5>
                            <p class="card-text">{{ festival.description }}</p>
                            <button onclick="on()">Turn on overlay effect</button>
                        </div>
                    </div>
                </div>
                <div id="overlay" onclick="off()">
                    <div class="col-8 img-overlay">
                        <img src="{{ festival.image_url }}" class="card-img-top" alt="{{ festival.name }}">
                    </div>
                </div>    
                {% endfor %}
            </div>

Any suggestion will be appreciated
Thank you

I forget to say that my problem is not showing the overlay but it will only shows the first image, no matter which card I click on.

The code for JavaScript.

function on() {
  document.getElementById("overlay").style.display = "block";
}

function off() {
  document.getElementById("overlay").style.display = "none";
}

16 thoughts on “How to overlay an image in a for loop in Django”

Leave a Comment