html - CSS中如何将div向上移动以显示另一个div？

Question

我有一个带有图像的 div (div_one)。在这个 div 下，我有另一个较小的 div (div_two)。我想在悬停后，调整这个 div_one (带有图片)的大小(较小的高度)并显示这个 div_two，它位于图像下方。但它并没有按照我想要的方式工作。图像跳转:/

.images {
  background: url('https://www.lokeshdhakar.com/projects/lightbox2/images/image-3.jpg');
  height: 200px;
  width: 150px;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: flex-end;
}

.images:hover {
  height: 150px;
  width: 100px;
}

img {
  height: 200px;
  width: 150px;
}

.info {
  display: none --> I want this to show after hover
}

<div class="images">
  <div class="info">lorem ipsum</div>
</div>

有什么想法吗？

Answer 1

1. 如果你想以更好的方式显示它，可以将其移到父元素之外。

2. .images:hover + .info 将选择另一个元素。我更喜欢使用不透明度更改方式。

3. 非悬停状态的transition属性将有助于演示，即图像不会跳转。

.images {
  background: url('https://www.lokeshdhakar.com/projects/lightbox2/images/image-3.jpg');
  height: 200px;
  width: 150px;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: flex-end;
  transition: all ease 1s;
}

.images:hover {
  height: 150px;
  width: 100px;
}

img {
  height: 200px;
  width: 150px;
}

.info {
  opacity: 0;
  transition: all ease 1s;
}

.images:hover+.info {
  opacity: 1;
}

<div class="images">
</div>
<div class="info">lorem ipsum</div>