如何在使用弹性框显示的以下图像上实现叠加动画?

Question

问题是每个图像都在一个容器中，以使用flexbox限制它们的宽度垂直对齐它们。

当我悬停时，我可以发生一些事情，但动画的位置不正确。我见过的这些类型动画的大多数实现都使用绝对位置和位置相对，但是如果我使用 flexbox，我似乎无法弄清楚如何做到这一点。

请看下面：

.logo {
width: 25vw;
}
// This creates a box around logos that is a square
.logobox {
width: 25vw;
height: 25vw;
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
.logos {
background: red;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: row;
flex-wrap: wrap;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 10%;
height: 0;
transition: .5s ease;
}
.logo-container:hover .overlay {
height: 10%;
}
.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%);
}

<div class="logos">
<div class="logo-container">
<a class="logobox" href=''>
<img class="logo" src='http://via.placeholder.com/350x150' class='img-responsive' alt="">
</a>
<div class="overlay">
<div class="text">
<p>Spicy jalapeno bacon ipsum dolor amet porchetta hamburger prosciutto ground round andouille. Chicken pastrami pork chop venison sausage. Ribeye drumstick meatball landjaeger alcatra frankfurter. Cow flank tongue, capicola sausage tail andouille
beef kielbasa shoulder. T-bone drumstick landjaeger, pork belly sausage cupim flank spare ribs filet mignon shankle pastrami fatback. Shankle frankfurter pork loin tail pastrami, meatloaf pork porchetta alcatra hamburger beef bacon pork chop.
</p>
</div>
</div>
</div>
<div class="logo-container">
<a class="logobox" href=''>
<img class="logo" src='http://via.placeholder.com/250x150' class='img-responsive' alt="">
</a>
<div class="overlay">
<div class="text">
<p>Shank ball tip doner pork belly tenderloin sirloin picanha andouille shankle bacon. Bacon boudin ham, alcatra shank meatball ribeye pork chop short loin. Alcatra porchetta flank, salami biltong chicken tail turducken ham pancetta picanha frankfurter
bacon. Alcatra brisket ham hock turducken landjaeger. Cow ham hock flank kielbasa pig. Boudin chicken tri-tip corned beef leberkas bresaola fatback ball tip t-bone short loin.
</p>
</div>
</div>
</div>
</div>

提前感谢您的帮助！

Answer 1

如果给出.logo-containerposition: relative;，以便绝对定位的overlay可以与之相关，然后将height: 25vw;移动到.logos文本应呈现在每个图像的顶部。

请注意，出于此演示的目的，我还更改了一些您可能想要重置/调整的height/width值。

根据评论更新

我还更改了text上的位置，以便正确显示。

堆栈代码段

.logo {
width: 25vw;
}
.logo-container {
position: relative;
}
/* This creates a box around logos that is a square */
.logobox {
width: 25vw;
height: 25vw;
display: flex;
align-items: center;
justify-content: center;
}
.logos {
background: red;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: row;
flex-wrap: wrap;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
height: 0;
transition: .5s ease;
}
.logo-container:hover .overlay {
height: 100%;
}
.text {
color: white;
font-size: 20px;
position: relative;
overflow: hidden;
top: 50%;
transform: translateY(-50%);
}

<div class="logos">
<div class="logo-container">
<a class="logobox" href=''>
<img class="logo" src='http://via.placeholder.com/350x150' class='img-responsive' alt="">
</a>
<div class="overlay">
<div class="text">
<p>Spicy jalapeno bacon ipsum dolor amet porchetta hamburger prosciutto ground round andouille. Chicken pastrami pork chop venison sausage. Ribeye drumstick meatball landjaeger alcatra frankfurter. Cow flank tongue, capicola sausage tail andouille
beef kielbasa shoulder. T-bone drumstick landjaeger, pork belly sausage cupim flank spare ribs filet mignon shankle pastrami fatback. Shankle frankfurter pork loin tail pastrami, meatloaf pork porchetta alcatra hamburger beef bacon pork chop.
</p>
</div>
</div>
</div>
<div class="logo-container">
<a class="logobox" href=''>
<img class="logo" src='http://via.placeholder.com/250x150' class='img-responsive' alt="">
</a>
<div class="overlay">
<div class="text">
<p>Shank ball tip doner pork belly tenderloin sirloin picanha andouille shankle bacon. Bacon boudin ham, alcatra shank meatball ribeye pork chop short loin. Alcatra porchetta flank, salami biltong chicken tail turducken ham pancetta picanha frankfurter
bacon. Alcatra brisket ham hock turducken landjaeger. Cow ham hock flank kielbasa pig. Boudin chicken tri-tip corned beef leberkas bresaola fatback ball tip t-bone short loin.
</p>
</div>
</div>
</div>
</div>

---

您还可以使用弹性框使文本在overlay居中

堆栈代码段

.logo {
width: 25vw;
}
.logo-container {
position: relative;
}
/* This creates a box around logos that is a square */
.logobox {
width: 25vw;
height: 25vw;
display: flex;
align-items: center;
justify-content: center;
}
.logos {
background: red;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: row;
flex-wrap: wrap;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
height: 0;
transition: .5s ease;
display: flex;                    /*  added  */
align-items: center;              /*  added  */
}
.logo-container:hover .overlay {
height: 100%;
}
.text {
color: white;
font-size: 20px;
}

<div class="logos">
<div class="logo-container">
<a class="logobox" href=''>
<img class="logo" src='http://via.placeholder.com/350x150' class='img-responsive' alt="">
</a>
<div class="overlay">
<div class="text">
<p>Spicy jalapeno bacon ipsum dolor amet porchetta hamburger prosciutto ground round andouille. Chicken pastrami pork chop venison sausage. Ribeye drumstick meatball landjaeger alcatra frankfurter. Cow flank tongue, capicola sausage tail andouille
beef kielbasa shoulder. T-bone drumstick landjaeger, pork belly sausage cupim flank spare ribs filet mignon shankle pastrami fatback. Shankle frankfurter pork loin tail pastrami, meatloaf pork porchetta alcatra hamburger beef bacon pork chop.
</p>
</div>
</div>
</div>
<div class="logo-container">
<a class="logobox" href=''>
<img class="logo" src='http://via.placeholder.com/250x150' class='img-responsive' alt="">
</a>
<div class="overlay">
<div class="text">
<p>Shank ball tip doner pork belly tenderloin sirloin picanha andouille shankle bacon. Bacon boudin ham, alcatra shank meatball ribeye pork chop short loin. Alcatra porchetta flank, salami biltong chicken tail turducken ham pancetta picanha frankfurter
bacon. Alcatra brisket ham hock turducken landjaeger. Cow ham hock flank kielbasa pig. Boudin chicken tri-tip corned beef leberkas bresaola fatback ball tip t-bone short loin.
</p>
</div>
</div>
</div>
</div>

Answer 2

>absolute位置取决于最接近的父relative位置，如果没有提到相对位置，则相对位置将是html/body。 在您的情况下，如果要在容器中显示它，则必须向容器添加相对位置：

.logo-container { position: relative; }