Question

如果没有javascript，这有可能吗？

以下是我的示例：http://codepen.io/tknz/pen/Nrdaew

我正试图让图片在悬停时变为自动高度。

HTML：

<div class="image-container">
    <img class="image-item" src="http://i.imgur.com/GIWdCVA.jpg">
</div>

CSS：

.image-container {
  margin: 0 auto;
  max-width: 800px;
}
.image-container .image-item {
  width: 100%;
  max-height: 200px;
  height: 20vw;
  object-fit: cover;
  transition: 0.5s ease-in all;
}
.image-container .image-item:hover {
  max-height: none;
  height: 100%;
  transition: 0.5s ease-out all;
}

Answer 1

将您的CSS代码更新为：

.image-container {
  margin: 0 auto;
  max-width: 800px;
}

.image-container .image-item {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  transition: all 2s ease-out; // I use 2s to easy see animation
}

.image-container .image-item:hover {
  max-height: 999px;
}

此代码max-height: 999px;，999px值是图片最大高度的硬编码（因为没有JS使用）。

工作正常：Here

在悬停不起作用时从vh过渡到100％

1 个答案: