Edit based on your comments: There are many approaches to toggling hidden content, below you will find a basic example. We are hiding the element with the class “hidden” and wiring up an event listener on the default image. Once the default image is clicked on it will fire a function that gets the parent element and applies a new class. In our CSS we are then hiding the default image and showing the previously hidden content. This is a rough example and by expanding on the styling you can do all sorts of things such as fading the hidden content in by setting a transition on the element’s opacity or sliding the hidden content into view by transitioning the transform properties as a couple of examples.

var target = document.querySelector(".parent .default");

target.addEventListener("click", function(){
  var parent = document.querySelector(".parent");
  parent.classList.add("show-hidden");
});

.parent {
  padding: 15px;
 }
 
 .parent p {
   color: black;
   font-size: 16px;
 }
 
 .hidden {
  display: none;
 }
 
 .parent.show-hidden .hidden {
  display: block
 }
 
 .parent.show-hidden .default {
  display: none;
 }

<div class="parent">
    <img class="default" src="https://html5up.net/uploads/demos/ethereal/images/gallery/thumbs/01.jpg" alt="" />
    <div class="hidden">
        <img src="https://html5up.net/uploads/demos/ethereal/images/gallery/thumbs/01.jpg" alt="" />
        <p>I am the text element</p>
    </div>
</div>

I’m using this free HTML template https://html5up.net/ethereal

In the portfolio section, when you click on an image, the image appears bigger for a better view.

I want to add some info or some text along with the popup image but somehow cannot add it to this code

<a href="https://html5up.net/uploads/demos/ethereal/images/gallery/thumbs/01.jpg" class="image filtered span-3" data-position="bottom"><img src="https://html5up.net/uploads/demos/ethereal/images/gallery/thumbs/01.jpg" alt="" /></a>