如何显示带有悬停效果标题的模态图像？答案

【问题标题】：How do I display modal images with hover effect captions?如何显示带有悬停效果标题的模态图像？
【发布时间】：2020-07-26 10:32:56
【问题描述】：

我有一个响应式图像网格，效果很好，我很满意。

现在我想为图像添加悬停效果，以便应用白色半透明滤镜，并在图像上显示文本以及图像的更多细节。我还希望图像在单击时成为模态并弹出。

似乎当我应用悬停效果时，弹出图像停止工作。谁能告诉我出了什么问题？注意：我知道悬停效果尚未应用于所有图像。这是因为当我意识到它不起作用时，我没有打扰。

var modalEle = document.querySelector(".modal");
var modalImage = document.querySelector(".modalImage");
Array.from(document.querySelectorAll(".ImgThumbnail")).forEach(item => {
   item.addEventListener("click", event => {
      modalEle.style.display = "block";
      modalImage.src = event.target.src;
   });
});
document.querySelector(".close").addEventListener("click", () => {
   modalEle.style.display = "none";
});

img {
  border: 2px solid;
  min-height: 100px;
  min-width: 100px;
}
body {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    font-family: verdana
}

/*MAIN*/
main {
    margin: 200px 0 100px 0;
    height: auto;
    max-width: 1024px;
    color: #66704D;
    letter-spacing: 3px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px 4px 2%;
}

.column {
  flex: 31.3%;
  max-width: 31.3%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/*overlay*/
.container {
  position: relative;
  width: 100%;
}

.ImgThumbnail {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(255,255,255,0.9);
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: #66704d;
  font-size: 20px;
  letter-spacing: 5px; 
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

/*modal*/
    .ImgThumbnail {
       cursor: pointer;
       transition: 0.3s;
    }

    .modal {
       display: none;
       position: fixed;
       z-index: 1;
       padding-top: 100px;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       overflow: auto;
       background-color: rgb(255, 255, 255,0.85);
    }
    .modalImage {
       margin: auto;
       display: block;
       width: 100%;
       height: auto;
       max-width: 1024px;
    }

    .close {
       position: absolute;
       top: 15px;
       right: 35px;
       color: #66704d;
       font-size: 40px;
       font-weight: bold;
       transition: 0.3s;
    }
    .close:hover,
    .close:focus {
       cursor: pointer;
    }
    @media only screen and (max-width: 700px) {
       .modalImage {
          width: 100%;
       }
    }


/*Tablet*/
@media (max-width:768px) {
.column {
    flex: 47%;
    max-width: 47%;
  } 


/*Mobile*/
@media (max-width:400px) {
.column {
    flex: 100%;
    max-width: 100%;
  } 
}

<html>
<body>

<!--MAIN CONTENT-->
<main>
    <div class="row">
        <div class="column">

            <div class="container">
            <img class="ImgThumbnail" src="images/Painting/Oranges in Berlin.jpg" alt="">
            <div class="overlay">
                <div class="text">caption content</div>
            </div>
            </div>

            <img class="ImgThumbnail" src="images/Painting/Bread Rolls.jpeg" alt="">
            <img class="ImgThumbnail" src="images/Painting/the Market.jpg" alt="">
            <img class="ImgThumbnail" src="images/Painting/Life Drawing with card.jpg" alt="">
            <img class="ImgThumbnail" src="images/Painting/Copy of The Carrofs IV.jpg" alt="">
            <img class="ImgThumbnail" src="images/Painting/The Carrofs I.JPG" alt="">
            <img class="ImgThumbnail" src="images/Painting/The Trig, from memory.jpg" alt="">
            <img class="ImgThumbnail" src="images/Painting/The Beacon.jpg" alt="">
            <img class="ImgThumbnail" src="images/Painting/Farm on the Hill.jpg" alt="">
            <img class="ImgThumbnail" src="images/Painting/Terrace Sunlight.jpg" alt="">
            <img class="ImgThumbnail" src="images/Painting/Across the Road.jpg" alt="">
            <img class="ImgThumbnail" src="images/Painting/Back Lane I.jpg" alt="">
        </div>
        <div class="column">
            <img class="ImgThumbnail" src="images/Painting/Cloud Study.jpg" alt="">
            <img class="ImgThumbnail" src="images/Painting/ London Bodies.jpg" alt="">
            <img class="ImgThumbnail" src="images/Painting/The Cloud.jpg" alt="">
            <img class="ImgThumbnail" src="images/Painting/Life Drawing II.jpg" alt="">
            <img class="ImgThumbnail" src="images/Painting/Copy of The Carrofs III.jpg" alt="">
            <img class="ImgThumbnail" src="images/Painting/The cow Field.jpg" alt="">
            <img class="ImgThumbnail" src="images/Painting/Bridal Veil, from memory.jpg" alt="">
            <img class="ImgThumbnail" src="images/Painting/The Sheep_s Pool.jpg" alt="">
            <img class="ImgThumbnail" src="images/Painting/Bunyan_s Valley.jpg" alt="">
            <img class="ImgThumbnail" src="images/Painting/Terrace Sunlight Study II .jpg" alt="">
            <img class="ImgThumbnail" src="images/Painting/The Back Lane.jpg" alt="">
        </div>
        <div class="column">
            <img class="ImgThumbnail" src="images/Painting/Maria_s House.jpg" alt="">
            <img class="ImgThumbnail" src="images/Painting/on The Tube.jpg" alt="">
            <img class="ImgThumbnail" src="images/Painting/Ben.jpg" alt="">
            <img class="ImgThumbnail" src="images/Painting/Life Drawing I.jpg" alt="">
            <img class="ImgThumbnail" src="images/Painting/The Carrofs II.JPG" alt="">
            <img class="ImgThumbnail" src="images/Painting/Aotea Harbor.jpg" alt="">
            <img class="ImgThumbnail" src="images/Painting/Aotea from description I.jpg" alt="">
            <img class="ImgThumbnail" src="images/Painting/The Valley.jpg" alt="">
            <img class="ImgThumbnail" src="images/Painting/Bunyans Oak.jpg" alt="">
            <img class="ImgThumbnail" src="images/Painting/Terrace Sunlight Study I.jpg" alt="">
            <img class="ImgThumbnail" src="images/Painting/Back Lane II.jpg" alt="">
        </div>
    </div>

<div class="modal">
<span class="close">×</span>
<img class="modalImage" id="img01">
</div>
</main>
</body>
</html>

【问题讨论】：

标签： javascript html css modal-dialog hover

【解决方案1】：

查看演示：https://codepen.io/turibamwe/pen/xxwGozx

使用这个javascript：

<script>
var modalEle = document.querySelector(".modal");
var modalImage = document.querySelector(".modalImage");
Array.from(document.querySelectorAll(".ImgThumbnail + .overlay")).forEach(item => {
  var itemImage = item.parentNode.firstElementChild.getAttribute("src");
   item.addEventListener("click", event => {
      modalEle.style.display = "block";
      modalImage.src = itemImage//event.target.src;
   });
});
document.querySelector(".close").addEventListener("click", () => {
   modalEle.style.display = "none";
});
</script>

【讨论】：

【解决方案2】：

欢迎来到论坛:)

听起来当光标悬停在您的图像上时，悬停状态实际上是分层在您的可点击图像元素的顶部，因此阻止用户点击它并激活弹出模式。尝试将您的侦听器也添加到悬停状态元素，或者将标题与图像分组，以便它们都可以被点击。我已经为下面的这个 sn-p 配对了你的示例。

干杯！

var modalEle = document.querySelector(".modal");
var modalImage = document.querySelector(".modalImage");
Array.from(document.querySelectorAll(".overlay")).forEach(item => {
  item.addEventListener("click", event => {
    modalEle.style.display = "block";
    modalImage.src = event.target.parentNode.querySelector(".ImgThumbnail").src;
  });
});
document.querySelector(".close").addEventListener("click", () => {
  modalEle.style.display = "none";
});

body {
  color: #66704D;
  letter-spacing: 3px;
}


/*overlay*/

.container {
  position: relative;
  width: 300px;
  height: 200px;
}

.ImgThumbnail {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(255, 255, 255, 0.9);
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: #66704d;
  font-size: 20px;
  letter-spacing: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}


/*modal*/

.ImgThumbnail {
  cursor: pointer;
  transition: 0.3s;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(255, 255, 255, 0.85);
}

.modalImage {
  margin: 0 auto;
  display: block;
  width: 80%;
  height: auto;
  max-width: 1024px;
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #66704d;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  cursor: pointer;
}

@media only screen and (max-width: 700px) {
  .modalImage {
    width: 100%;
  }
}

<div class="container">
  <div class="imgGroup">
    <img class="ImgThumbnail" src="https://placehold.it/300x200" alt="">
    <div class="overlay">
      <div class="text">caption content</div>
    </div>
  </div>
</div>
<div class="modal">
  <span class="close">×</span>
  <img class="modalImage" id="img01">
</div>

【讨论】：

是的，我原以为问题一定是这样的，非常感谢您的帮助。我已经进行了更改，并且效果很好！