title: onclick zoom image in full screen
body: <p><br>
  I have slider wth product image, there is a button <code>view more</code>. I want that when someone clicks on that button then image of that product should be visible/zoomed to full screen with animation. Just like this:<br></p>
  
  <blockquote>
    <p><a href="https://dribbble.com/shots/6347184-Better-Hero" rel="nofollow noreferrer">https://dribbble.com/shots/6347184-Better-Hero</a> -- Example link</p>
  </blockquote>
  
  <p><br>
  My header screenshot:<br>
  <a href="https://i.stack.imgur.com/mDXEq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mDXEq.png" alt="enter image description here"></a><br>
  <strong>My code:</strong><br></p>
  
  <pre><code>&lt;div class="projectSlider"&gt; // slider
      &lt;div class="projectSlider--item"&gt; // slider item 1
          &lt;div class="row"&gt;
              &lt;div class="col-md-6 col-sm-12 col-xs-12"&gt;
                  &lt;div class="projectSlider--text"&gt;
                      &lt;div class="projectSlider--subTitle"&gt;An Inspirational Collection Of&lt;/div&gt;
                      &lt;div class="projectSlider--title"&gt;&lt;span&gt;Creative Designs&lt;/span&gt;&lt;/div&gt;
                      &lt;p class="projectSlider--description"&gt;
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                          incididunt ut labore et dolore magna aliqua.
                      &lt;/p&gt;
                      &lt;a href="#" class="btn secondary projectSlider--view" data-quickview="quickView"&gt;View
                          More&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-6 col-sm-12 col-xs-12"&gt;
                  &lt;div class="projectSlider--img"&gt;
                      &lt;img src="img/template.jpg" alt="template"&gt; // slider image
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      // slider items, so on....
  &lt;/div&gt;
  </code></pre>
  
  <p>I don't know how to do that kind of image zoom effect. Can you please help me with this? I m stuck</p>