Your code reminds me of
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_img[
^]
This W3Schools example deals with one single image whose ID is known when zooming.
The problem is that you must supply the ID of the image, so that the zoom function knows which image to treat.
You must have an event handler for each single image e.g.
onclick="zoom('pizzas')
Please have a look at this example:
<pre><!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script>
function zoom(id){
var modal = document.getElementById("myModal");
var img = document.getElementById(id);
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
modal.style.display = "block";
modalImg.src = img.src;
captionText.innerHTML = img.alt;
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}};
</script>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.9);
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
</head>
<body>
<div class="col-lg-4 mb-4">
<div class="card h-100">
<h4 class="card-header">Pizzas</h4>
<div class="card-body">
<p class="card-text">Seasoned appropriately, right ingredients in and cooked just to the point,
our pizzas will conquer your palette!</p>
<img class="meal_image" src="Images/Pizzas.jpg" alt="Pizzas Meal" id="pizzas" onclick="zoom('pizzas')">
</div>
<div class="card-footer">
<a href="#" class="btn btn-block btn-info">Take this</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4">
<div class="card h-100">
<h4 class="card-header">Steelazani</h4>
<div class="card-body">
<p class="card-text">Everything measures, mixed and tasted to perfection inorder
to make you feel the sublime deliciousness!</p>
<img class="meal_image" src="Images/Steelazani.jpg" alt="Steelazani Meal" id="steelazani" onclick="zoom('steelazani')">
</div>
<div class="card-footer">
<a href="#" class="btn btn-block btn-info">Take this</a>
</div>
</div>
</div>
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
</body>