title: how to show tick mark and an overlay on image while clicking an image, but when i click other image it should hide and display the same on new image?
body: <p>i want the image to be overlay-ed with any color and give a tick mark on it(As it is selected) allowing only one image at  a time. while clicking other image it should hide the previous one and show tick and overlay on new image.</p>
  
  <pre><code>&lt;div class="grid-two imageandtext"&gt;
                                      &lt;figure&gt;
  
                                          &lt;img src="assets/images/painting.jpg" class="img-thumbnail"&gt;
                                          &lt;div class="caption"&gt;
                                              &lt;p&gt;Painting&lt;/p&gt;
                                          &lt;/div&gt;                     
                                          &lt;div class="imageandtext image_grid"&gt;
                                              &lt;img src="assets/images/photography.jpg" class="img-thumbnail" &gt;
                                              &lt;div class="caption1"&gt;
                                                  &lt;p&gt;Photography&lt;/p&gt;
                                              &lt;/div&gt;&lt;/div&gt;
                                          &lt;/figure&gt;
                                      &lt;/div&gt;
  </code></pre>
  
  <p>it should display like below image</p>
  
  <p><a href="https://i.stack.imgur.com/gT94Y.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gT94Y.jpg" alt="![[1]: https://i.stack.imgur.com/VZvgy.jpg"></a></p>
  
  <p>now it is working like this</p>
  
  <p><a href="http://jsfiddle.net/liza_susan/L8jyum77/" rel="nofollow noreferrer">https://jsfiddle.net/liza_susan/L8jyum77/</a></p>