使用CSS和JS单击时在图像上切换信息

我浏览了一下你的网站,这可能是解决你问题的一个可能的方法。

在JS中添加以下脚本:

var imageElems = document.getElementsByClassName('image-box');

for (var i=0; i<imageElems.length; i++) {
    imageElems[i].addEventListener('click', function() {
        this.querySelector('.overlay').classList.toggle('show');
    });
 }

并将其添加到CSS中:

.overlay.show {
    opacity: 1;
}

所以基本上我在这里做的是在你所有的图片上添加了一个点击事件 className: image-box 一个类称为 show 单击。

另外,你应该以一种更好的方式来构建你的问题,为你的问题提供代码示例,以便这里的人能够更好地理解你的问题。我试图帮助你的唯一原因是因为我看到你是一个图形设计师,试图做一些代码,这已经足够令人鼓舞了!:)

您也可以在没有JS、纯CSS的情况下实现所需的效果。

.element {
  position: relative;
  height: 300px;
  width: 300px;
  background: red;
}

.pseudo-checkbox {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

.pseudo-checkbox:checked + .description {
  display: initial;
}

.description {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="element">
  <input type="checkbox" class="pseudo-checkbox" />
  <div class="description">
    Description
  </div>
</div>