我想将文本放置在使用jQuery完成的缩放图像上

Question

我已经使用jQuery的灯箱插件从一个图像缩放另一个图像，现在我想在该缩放图像上显示文本。

在我的代码中，当我单击1.jpg时，imageq1.jpg将在同一窗口上以缩放效果打开。我想在该图像上显示一些文本。

.gallery {
  margin: 10px 50px;
}

.gallery img {
  transition: 1s;
  padding: 15px;
  width: 200px;
}

.gallery img:hover {
  filter: grayscale(100%);
  transform: scale(1, 1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/lightbox.min.css">
<script src="js/lightbox-plus-jquery.min.js"></script>
<div class="gallery">
  <a href="images/imageq1.jpg" data-lightbox="mygallery" data-title="Question number 1"><img src="images/1.jpg"></a>
  <a href="images/2.jpg" data-lightbox="mygallery" data-title="Question number 1"><img src="images/2.jpg"></a>
  <a href="images/3.jpg"><img src="images/3.jpg"></a>
  <a href="images/4.jpg"><img src="images/4.jpg"></a>
  <a href="images/5.jpg"><img src="images/5.jpg"></a>
  <a href="images/6.jpg"><img src="images/6.jpg"></a>
  <a href="images/7.jpg"><img src="images/7.jpg"></a>
  <a href="images/8.jpg"><img src="images/8.jpg"></a>
</div>