javascript - 创建点击图像叠加

我有什么 :我目前有代码，所以如果你将鼠标悬停在图像上，叠加层将从底部滑动到顶部。

我想要什么 :我希望能够使用 onclick 而不是悬停实现从下到上相同的叠加幻灯片。我无法弄清楚如何实现这一目标。

代码:

.container {
  position: relative;
  width: 50%;
}

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

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.container:hover .overlay {
  height: 100%;
}

.text {
  white-space: nowrap;
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<h2>Slide in Overlay from the Bottom</h2>
<p>Hover over the image to see the effect.</p>

<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

</body>
</html>

最佳答案

@MMM

稍微即兴的方式

CSS

.container .overlay.show{
  height:100%;
}

$(".container").on('click',function(){
    $(this).children(".overlay").toggleClass("show");
});

这是做什么的。单击它会打开叠加层，再次单击它会隐藏叠加层

希望这可以帮助

关于javascript - 创建点击图像叠加，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45024878/