Lectures List

Create image modal using CSS and JS

<!DOCTYPE html>
<html>
<head>
<title>Image modal</title>
<style>
.image{
cursor: pointer;
transition: 0.3s;
}

.image:hover{
opacity: 0.7;
}

.modal{
display: none;
position: fixed;
z-index: 1;
background-color: rgb(0, 0, 0);
width: 100%;
height: 100%;
left: 0;
top:0;
overflow: auto;
padding-top: 1%;
}

.modal-content{
display: block;
width: 80%;
max-width: 700px;
margin:auto;
}

.close{
position: absolute;
right:1%;
top:1%;
color:white;
cursor: pointer;
font-size: 40px;
}

.modal-content{
animation-name: zoom;
animation-duration: 0.6s;
}

@keyframes zoom{
from {transform: scale(0);}
to{transform: scale(1);}
}

@media only screen and (max-width: 700px){
.modal-content {
  width: 100%;
}
}
</style>
</head>
<body>
<img src="award1.jpg" alt="" width="100" height="100" class="image" onclick="showme(this.src);">
<img src="hos/doctor.jpg" alt="" width="100" height="100" class="image" onclick="showme(this.src);">

<div class="modal" id="modal">
<div class="close" id="close">&times;</div>
<img id="modal-image" class="modal-content">
<div class="caption"></div>
</div>
</body>
</html>

<script type="text/javascript">
var modal=document.getElementById("modal");
var modalImage=document.getElementById("modal-image");
function showme(src){
modal.style.display="block";
modalImage.src=src;
}

document.getElementById("close").onclick=function(){
modal.style.display="none";
}
</script>