Solution 1 :

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 {
  padding: 15px;
 .parent p {
   color: black;
   font-size: 16px;
 .hidden {
  display: none;
 } .hidden {
  display: block
 } .default {
  display: none;
<div class="parent">
    <img class="default" src="" alt="" />
    <div class="hidden">
        <img src="" alt="" />
        <p>I am the text element</p>

Problem :

I’m using this free HTML template

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="" class="image filtered span-3" data-position="bottom"><img src="" alt="" /></a>


Comment posted by Austin737

You are going to have create some kind of a parent element that will contain the HTML that you have provided in your question along with a text element, such as a

tag. You could then use absolute positioning to place the text over the image.

Comment posted by BronzeJamie

So you are saying to wrap that element with a

tag ? I don’t want to place the text over the image, but rather near it, like an image with infos.

Comment posted by Austin737

No, you will need a parent element, like a

tag for example. Then position your image and text elements however you wish.

Comment posted by BronzeJamie

When I try an parent element like you said, the image completely disappears. If you look at the code I provided, the image that is showing is in an tag, not an tag.

Comment posted by BronzeJamie

Thank you for the code, but I think you inverted it ? What I was trying to say is that once you clicked on the image, the image with the text will show. Not the other way.

Comment posted by Austin737

You want to click an image and have a different image show?

Comment posted by BronzeJamie

No, I want to click the image and show a whole div/page with informations about that image, instead of showing the same image.

Comment posted by Austin737

Then set the href of the tag to the URL of the page you want to show. Or if you want to display an element on the same page without navigating to a completely different page then remove the tag and instead create a new element that contains the content that you want to show, hide it via CSS, place a click listener on the current image that will toggle a CSS class on the hidden element to show it once the class is applied.

Comment posted by BronzeJamie

The second option seems reasonable as I want to stay in the same page. Do you have some code for that listener thing ?