仅向弹出图像添加文本

Question

我正在使用这个免费的HTML模板https://html5up.net/ethereal

在公文包部分中，当您单击图像时，图像会变得更大，以便获得更好的视图。

我想添加一些信息或一些文本与弹出式图像，但不知何故无法添加到此代码

<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>

Answer 1

根据你的评论进行编辑:有很多方法可以切换隐藏内容，下面你会找到一个基本的例子。我们隐藏了带有“隐藏”类的元素，并在默认图像上连接了一个事件侦听器。单击默认图像后，它将触发一个函数，该函数获取父元素并应用一个新类。在我们的CSS中，我们隐藏了默认图片，并显示了之前隐藏的内容。这是一个粗略的例子，通过扩展样式，你可以做各种各样的事情，比如通过在元素的不透明度上设置一个过渡来淡入隐藏内容，或者通过转换变换属性来将隐藏内容滑动到视图中。

​

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>

​