悬停在另一个前面潜水

Question

我正试图让一个用户名、密码div出现在其他带有图像的div前面。我尝试了不同的选择，但似乎都不起作用。当我让它工作时，边距或填充会把事情搞砸。

.imagesparent{
}
.images{
display: flex;
margin: 0 auto;
position: relative;
z-index: 1;
justify-content: center;
text-align: center;
}
.joinus{
visibility:hidden;
position: absolute;
z-index: 2;
width: 300px;
height: 300px;
}
.images:hover + .joinus{
visibility: visible;
background-color: blue;
}

<div class="imagesparent">
<div class="images">
<img src="polohombrerojo.jpg" class="">
<img src="trajenegro1.jpg" class="">
</div>
<div class="images">
<img src="polohombreverde.jpg" class="">
<img src="hombrepolo1.png" class="">
</div>
<div class="joinus">
Join us to have the latest updates!
<br>
User:
<input type="text" name="" value="">
<br>
Password:
<input type="text" name="" value="">
</div>
</div>

Answer 1

你想要这样吗？

.imagesparent{
}
.images{
display: flex;
margin: 0 auto;
position: relative;
z-index: 1;
justify-content: center;
text-align: center;
}
.joinus{
visibility:hidden;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 300px;
height: 300px;
}
.joinus:hover{
visibility: visible;
background-color: blue;
}
.images:hover ~ .joinus{
visibility: visible;
background-color: blue;
}

<div class="imagesparent">
<div class="images">
<img src="image.jpg" class="">
<img src="image.jpg" class="">
</div>
<div class="images">
<img src="image.jpg" class="">
<img src="image.jpg" class="">
</div>
<div class="joinus">
Join us to have the latest updates!
<br>
User:
<input type="text" name="" value="">
<br>
Password:
<input type="text" name="" value="">
</div>
</div>