Javascript 单击图像后如何使文本可见？

我正在制作我的在线作品集，我想在点击图片后添加一些文字。我正在使用引导程序来布局我的投资组合

现在，当我点击公文包中的一张图片时，它已经打开了另一张图片，但我想在图片下添加一些文本

我试着在div中放置一个带有一些文本的p元素，但是文本要么在单击它之前显示在图片下方，要么显示在图片中

这是其中一个投资组合项目的代码：

<a href="img/portfolio/hanno/hanno2.png" class="portfolio-item set-bg" data-setbg="img/portfolio/hanno/hanno.png">
    <div class="pi-inner">
          <h2>+ See Project</h2>
    </div>
</a>
</div>

我试着把p元素放在div中，它把所有的东西都放在一起，但是没有成功。img/portfolio/hanno/hanno.png是主屏幕上的图片。如果单击图片，屏幕上将打开img/portfolio/hanno/hanno2.png。在这张图片下面我想要一些文字

我还尝试在“pi innder”div下添加另一个div，如下所示：

<div class="mix col-lg-6 col-md-6 web">
<a href="img/portfolio/hanno/hanno2.png" class="portfolio-item set-bg" data-setbg="img/portfolio/hanno/hanno.png">
    <div class="pi-inner">
        <h2>+ See Project</h2>
        </div>
        <div id="ShowDiv">
                <p>Hanno insurance website redesign</p>
        </div>
</a>
</div>

---

我想也许我可以添加一些javascript，当我点击主屏幕上的图片时，会在照片（或上面）下显示文本。我真的搞不懂这是怎么回事，虽然我猜这很容易。我了解一点，但我不知道应该如何用javascript编写代码。

希望您使用的是引导，然后以下面的示例在代码中使用

&时代；
模态头
模态中的一些文本

接近

如果您单击的元素位于

元素内部，您希望发生什么？