Lectures List
capscom technology computer course almora

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>
Author/Written by: Mr Hemant Singh (Founder)
Terms & Conditions CAPSCOM TECHNOLOGY Pvt. Ltd. का बेहतर रूप से संचालन करने के लिए यहॉ कुछ नियमें और शर्ते लागू है अगर आप कैप्सकॉम टैक्नोलॉजी में पढ़ रहे है तो यह आप पर लागू होता है।