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";
}

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

  1. I like the helpful information you provide on your articles.

    I’ll bookmark your weblog and check once more here frequently.
    I’m reasonably sure I will be told many new stuff proper here!
    Best of luck for the following!

    Reply
  2. Great goods from you, man. I have understand your stuff previous to and you’re just
    too magnificent. I actually like what you have acquired
    here, certainly like what you’re saying and the way in which you say
    it. You make it enjoyable and you still care for to keep
    it sensible. I cant wait to read far more from you.

    This is actually a wonderful site. scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery

    Reply