如何向上移动div以在CSS中显示另一个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将选择另一个元素。我更喜欢使用opacity转换方式。

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>

Answer 2

我将使用3项：

1. 另外两个项目所在的容器
2. 将显示在另一个项目之上并设置动画的项目
3. 我放入文本的项目，显示在前一个项目下

使用z索引，可以将两个块显示为层。

使用过渡，可以创建一个简单的动画效果。

这里有一个动作示例：

.container {
display:block;
width: 150px;
height: 200px;
position: relative;
}
.content-hover {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
background: grey;
transition: height linear 0.3s;
}
.content-hover:hover {
height: 50%;
}
.content-under {
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
width: 100%;
height: 50px;
padding: 10px;
}

<div class="container">
<div class="content-hover">
</div>
<div class="content-under">
<p>My hidden text</p>
</div>
</div>

Answer 3

当.images选择器悬停时，将通过覆盖.info选择器来解决此问题。

.images:hover .info {
display: block;
}

当.images选择器悬停时，.images:hover .info指示.info选择器。

.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;
}
.images:hover .info {
display: block;
}

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