Simple image popup effect with vanilla js and css animation


Simple image popup effect with vanilla js and css animation Tutorial by Mirko Zovko | 14. Sep. 2020.

Welcome to one more tutorial in series of creating simple elements with vanilla js. In this tutorial I’ll show you how to create a simple popup image effect with vanilla js and css animation.

As always first will start with html structure. Difference from last time is that we are having 2 html structures now. One is going to be used for gallery and second for popup image. First one is only an image gallery (image container) that contains images, so there is no special structure there at all. Here is one example:

Second html structure is for a popup image. It contain:

  • .popupContainer - is fixed container for popup image
  • .popUpBackground - is a background color for popup image used for background animation effect
  • .popImage - popup image

Big difference for this second html structure is that all of it will be in created with js function.

CSS style is very simple. For gallery you can use whatever style you want because we need to use only class for galley (image container) and style is not something that we really need, because we are going to copy it. You will see more under js function explanation.

CSS code for popup image is very similar to modal except modal content because we are using only image. You can see the code below.

JS code is a bit more complicated than the latest tutorial that I created, but I commented on almost every line of the code and I think you will understand it. If not just write to me and I’ll explain even more.

To start a popup image you have to start the function initImagePopup("Image container"). Image container is an id or class of the element that is used for gallery of the images. First thing I do in the function is check if I click an image from the gallery, and if yes I’m creating a copy of that image and placing it on the same place where the clicked image is.

While doing that I’m also creating the container and background element of the image and placing everything at the end of the body. Then I’m starting the popup animation. To cancel the popup I created two other functions. Image will close if you click on it, or if you click on background. After close animation is done, I’m removing all of the elements for the popup image. Entire code you can see below and also you can test it on jsFiddle or on Codepen.

I hope you liked this article. If you have some suggestion or idea feel free to write in comment section bellow. Enjoy! :)