如何为图像添加 CSS Reveal 动画

我们可能会想“好吧，这是一个简单的任务！在你制作动画的图像上方添加一个额外的元素，它就完成了。” 没错，但我们不会使用任何额外的元素或伪元素。我们将只使用元素来工作<img>。而已！

这听起来可能是不可能的，因为仅使用图像元素，我们无法在其上方添加任何东西。确实，我们不会在上面有任何东西，但我们会伪造它！

下面是我们将要一起探索的内容演示：

HTML

<img src="https://picsum.photos/id/1069/250/250" class="left" alt="a jellyfish">
<img src="https://picsum.photos/id/1074/250/250" class="right" alt="a lioness">
<img src="https://picsum.photos/id/433/250/250" class="top" alt="a bear">
<img src="https://picsum.photos/id/582/250/250" class="bottom" alt="a wolf">

CSS

img {
  --s: 200px; /* the image size */
  
  width: var(--s);
  height: var(--s); /* better than aspect-ratio in case the image has a height attribute */
  box-sizing: border-box;
  object-fit: cover;
  cursor: pointer;
  transition: .5s;
}
img.left {
  object-position: right;
  padding-left: var(--s);
  background: #542437;
}
img.right {
  object-position: left;
  padding-right: var(--s);
  background: #8A9B0F;
}
img.top {
  object-position: bottom;
  padding-top: var(--s);
  background: #E94E77;
}
img.bottom {
  object-position: top;
  padding-bottom: var(--s);
  background: #7A6A53;
}

img:hover {
  padding: 0;
}


body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: auto auto;
  place-content: center;
  gap: 30px;
  background: #C6E5D9;
}

大家可以放到样式里看看，如下图所示：