我有一个水平排列的图像库,但是后来我做到了,以便当您将鼠标悬停在图像上时,图像上会覆盖文字,现在我以前没有什么东西可以用来使它们水平排列。 我尝试在所有选择器上使用左浮点数(同样使用display inline-block),但是什么也没有
和CSS
.container{
position:relative;
width: 100%;
}
.gallery{
width: 25%;
padding: 0vw;
margin: 3%;
border-radius: 5vw;
display: inline-block;
margin-left: 5%
}
.img{
width: 100%;
height: 120%;
}
.overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 95%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: blueviolet;
}
.container:hover .overlay{
opacity: 1;
}
.text{
color: aliceblue;
font-size: 2vw;
font-family: 'poppins',sans-serif;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
-ms-transform: translate(-50%, -50%);
}