<link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected];400;500;600;700&display=swap" rel="stylesheet">
<div class="container">
<h1>Simple image popup effect with vanilla js and css animation</h1>
<h2>Click on the image</h2>
<!-- Container for images that will have popup effec -->
<div class="img-container">
<img alt=" " src="https://codeorum.com/images/article_images/900/20200726T133520_900.jpg">
<img alt=" " src="https://codeorum.com/images/article_images/900/20200726T133520_900.jpg">
</div>
</div>
body {
margin: 0;
padding: 0;
background: #3c72d6;
background: linear-gradient(to right, #f8d9b1, #ffd857);
font-family: "Quicksand", sans-serif;
color: #262626;
}
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 10px 10px 100px 10px;
h1 {
text-align: center;
margin-bottom: 30px;
font-weight: 500;
}
h2 {
font-weight: 500;
}
}
.img-container {
display: flex;
flex-direction: row;
justify-content: space-between;
img {
cursor: pointer;
border-radius: 6px;
width: 48%;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15),
0 10px 10px -5px rgba(0, 0, 0, 0.1) !important;
}
}
// container for popup image
.popupContainer {
position: fixed;
left: 0;
bottom: 0;
right: 0;
top: 0;
overflow: auto;
// background of the popup umage
.popUpBackground {
transition: all 0.3s ease-in-out;
position: fixed;
left: 0;
bottom: 0;
right: 0;
top: 0;
&.active {
background-color: rgba(0, 0, 0, 0.4);
}
}
// popup image, you can adjust here animation tranistion time and effect
.popImage {
position: relative;
display: block;
transition: all 0.3s ease-in-out;
border-radius: 6px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15),
0 10px 10px -5px rgba(0, 0, 0, 0.1);
}
}
View Compiled
function initImagePopup(elem){
// check for mouse click, add event listener on document
document.addEventListener('click', function (e) {
// check if click target is img of the elem - elem is image container
if (!e.target.matches(elem +' img')) return;
else{
var image = e.target; // get current clicked image
// create new popup image with all attributes for clicked images and offsets of the clicked image
var popupImage = document.createElement("img");
popupImage.setAttribute('src', image.src);
popupImage.style.width = image.width+"px";
popupImage.style.height = image.height+"px";
popupImage.style.left = image.offsetLeft+"px";
popupImage.style.top = image.offsetTop+"px";
popupImage.classList.add('popImage');
// creating popup image container
var popupContainer = document.createElement("div");
popupContainer.classList.add('popupContainer');
// creating popup image background
var popUpBackground = document.createElement("div");
popUpBackground.classList.add('popUpBackground');
// append all created elements to the popupContainer then on the document.body
popupContainer.appendChild(popUpBackground);
popupContainer.appendChild(popupImage);
document.body.appendChild(popupContainer);
// call function popup image to create new dimensions for popup image and make the effect
popupImageFunction();
// resize function, so that popup image have responsive ability
var wait;
window.onresize = function(){
clearTimeout(wait);
wait = setTimeout(popupImageFunction, 100);
};
// close popup image clicking on it
popupImage.addEventListener('click', function (e) {
closePopUpImage();
});
// close popup image on clicking on the background
popUpBackground.addEventListener('click', function (e) {
closePopUpImage();
});
function popupImageFunction(){
// wait few miliseconds (10) and change style of the popup image and make it popup
// waiting is for animation to work, yulu can disable it and check what is happening when it's not there
setTimeout(function(){
// I created this part very simple, but you can do it much better by calculating height and width of the screen,
// image dimensions.. so that popup image can be placed much better
popUpBackground.classList.add('active');
popupImage.style.left = "15%";
popupImage.style.top = "50px";
popupImage.style.width = window.innerWidth * 0.7+"px";
popupImage.style.height = ((image.height / image.width) * (window.innerWidth * 0.7))+"px";
}, 10);
}
// function for closing popup image, first it will be return to the place where
// it started then it will be removed totaly (deleted) after animation is over, in our case 300ms
function closePopUpImage(){
popupImage.style.width = image.width+"px";
popupImage.style.height = image.height+"px";
popupImage.style.left = image.offsetLeft+"px";
popupImage.style.top = image.offsetTop+"px";
popUpBackground.classList.remove('active');
setTimeout(function(){
popupContainer.remove();
}, 300);
}
}
});
}
// Start popup image function
initImagePopup(".img-container") // elem = image container
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.