Click on an image to zoom in
HTML

I noticed that you didn't put the ul or ol tag in your code, you need to put your li tags inside the a ul or ol in order to have a more semantic structure.

&lt;ul id="my-images"&gt;
    &lt;li&gt;
        &lt;img src="https://api.fnkr.net/testimg/350x200/00CED1/FFF/?text=img+placeholder" alt="Ash Image Gallery 1" &gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;img src="https://api.fnkr.net/testimg/350x200/00CED1/FFF/?text=img+placeholder" alt="Ash Image Gallery 2"&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;img src="https://api.fnkr.net/testimg/350x200/00CED1/FFF/?text=img+placeholder" alt="Ash Image Gallery 3"&gt;
    &lt;/li&gt;
&lt;/ul&gt;

&lt;!-- The image zoomed in will be put inside the tag below, you should keep it in your HTML file in order to show your images --&gt;
&lt;div class="modal"&gt;&lt;/div&gt;


CSS

I did some very basic styling for the modal to look more attractive in the demo.

.modal {
    display: none;
    background: #000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .8;
}

.modal .modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -120px;
    margin-left: -150px;
    color: #fff;
}

.modal img, .modal span {
    z-index: 10;
}


JavaScript

I put all the images inside the images variable and also put the modal element in it's own variable.

Then I looped through each image using the forEach(), defining that for each image, which the user has clicked, it will put a display: block to the modal element and insert a piece of HTML containing an &lt;img&gt; tag and a &lt;span&gt; tag with the alt property in it.

And last but not less important, everytime that the user clicks in the modal area with the display: block activated, it will put a display: none automatically on it.

var images = document.querySelectorAll('#my-images img'),
    modal = document.querySelector('.modal');

// Loops through the all the images selected...
images.forEach(function (image) {
    // When the image is clicked...
    image.addEventListener('click', function(event) {
        modal.innerHTML = '&lt;div class="modal-content"&gt;&lt;img src="' + event.target.src + '"&gt;&lt;br&gt;&lt;span&gt;' + event.target.alt + '&lt;/span&gt;&lt;/div&gt;';
        modal.style.display = 'block';
    });
});

// When the user clicks somewhere in the "modal" area it automatically closes itself
modal.addEventListener('click', function () {
    this.style.display = 'none';
});


I didn't bother to put any effect on the modal element, I was simply controlling the hide and show properties and didn't cared about fadeIn or fadeOut that were mentioned in your code.

The easiest and fastest way to make some animations, would be making use of some third-party animation library such as Animate.css that comes with tons of cool effects to work with.