How to add caption underneath image(the image is used for a lightbox)

so im using Lightbox - Lokesh Dhakar and i have 3 images in a row and when i click on them it opens a light box. The thing is i have just a plain image and i would like to add a caption underneath it. Not a caption when the lightbox opens ( i already have that) but a caption underneath the image before the lightbox opens.

this is what the code looks like for an image

<body> 
    <h1>
        <a href="index.html">
        <img class="logo" src="../img/nota.png">
        </a>
    </h1>
<hr>

<section>
<nav>
    <li><a href="index.html" class="button">ARTWORK</a></li>
    <li><a href="logos.html" class="button">LOGOS</a></li>
    <li><a href="other.html" class="button">OTHER</a></li>
    <li><a href="contact.html" class="button">CONTACT</a></li>
</nav>
</section>

    <div class="imgcontainer">
    <a class="lightboximage" href="../img/car.jpg" data-lightbox="image-1" data-title="CENA:"><img class="artworkimg" src="../img/car.jpg"></a>
    <a class="lightboximage" href="../img/car.jpg" data-lightbox="image-1"><img class="artworkimg" src="../img/car.jpg"></a>
    <a class="lightboximage" href="../img/car.jpg" data-lightbox="image-1"><img class="artworkimg" src="../img/car.jpg"></a>
    <script src="../js/lightbox.js"></script>
    <script>
    lightbox.option({'showImageNumberLabel': false})
</script>
    </div>
</body>

Ive tried messing about adding p to some places, but cant seems to figure it out.

Solution

You should be able to add the caption by following the steps I've taken in the snippet below.

I've nested a span with the caption content inside .lightboximage. To display it below the image I have used flexbox properties.

.lightboximage  {
display: inline-flex;
flex-direction: column;
text-decoration: none;
}

.caption {
  font-family: sans-serif;
  color: black;
  font-weight: bold;
  display: inline-block;
  padding-top: .5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/js/lightbox.js"></script>


<div class="imgcontainer">
  <a class="lightboximage" href="https://unsplash.it/200x200" data-lightbox="image-1" data-title="CENA:">     <img class="artworkimg" src="https://unsplash.it/200x200">
    <span class="caption">My Caption</span>
  </a>
  <a class="lightboximage" href="https://unsplash.it/200x200" data-lightbox="image-1" data-title="CENA:">     <img class="artworkimg" src="https://unsplash.it/200x200">
    <span class="caption">My Caption</span>
  </a>
  <a class="lightboximage" href="https://unsplash.it/200x200" data-lightbox="image-1" data-title="CENA:">     <img class="artworkimg" src="https://unsplash.it/200x200">
    <span class="caption">My Caption</span>
  </a>
</div>