在css中创建具有3个图像的内联滚动图像

Question

我是CSS&HTML和我正在尝试创建3个在线的圆形滚动图像。我最初使用display: inline-block内联图像，这很好地将3个图像都放在一行中。

然而，当我添加了使图像全部滚动到文本上的代码时，这已经彻底改变了定位。我相信这些图像现在是一张接一张的，可以看到的一张图片现在重叠在页面上的其他元素上。

请参阅下面的代码。此外，如果我的代码到处都是，请原谅(我欢迎更正(，因为我在学习过程中从许多在线来源找到了网站中这个特定部分使用的不同代码。

.middleimgs {
width: 100%;
display: inline-block;
padding: 0px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.container1 {
position: absolute;
width: 50%;
width: 300px;
height: 300px;
}
.image {
display: inline-block;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
opacity: 0;
transition: .5s ease;
border-radius: 160px;
background-color: lightpink;
}
.middleimgs:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 16px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}

<div class="content-wrap">
<h2 style="text-align: center;">Invest In Your Future</h2>
<p style="text-align: center;">
Leverage agile frameworks to provide a robust synopsis for high level overviews.
</p>
<div class="middleimgs">
<div class="container1">
<img src="https://picsum.photos/300/300" alt="pound sign linked" width="300px" height="300px" class="image">
<div class="overlay">
<div class="text">Targeting vertical integration with a goal to maximise share of voice.</div>
</div>
</div>
<div class="container1">
<img src="https://picsum.photos/300/300" alt="investing money" width="300px" height="300px" class="image">
<div class="overlay">
<div class="text">Leverage agile frameworks to provide a robust synopsis for high level overviews.</div>
</div>
</div>
<div class="container1">
<img src="https://picsum.photos/300/300" alt="community" width="300px" height="300px" class="image">
<div class="overlay">
<div class="text">Leverage blue-sky thinking while remembering to be transparent.</div>
</div>
</div>
</div>
</div>

很抱歉问了这么长的问题，希望有人能帮忙。我也在学习Javascript，所以如果你认为用JS做得更好，请也告诉我。

谢谢！

Answer 1

你非常接近！看起来只需要做一些更改。首先，您的：hover应该使用.contaner1元素，而不是.middleimgs元素。(像这样：(.container1:hover .overlay。这样悬停不会同时激活所有三个文本框。

为了防止集装箱堆叠在一起，您可以将.container1{position: absolute}更改为.container1{position: relative}

为了使这三个图像在水平方向上并排出现，给它们display: inline-block。

.middleimgs {
width: 100%;
display: inline-block;
padding: 0px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.container1 {
position: relative;
display: inline-block;
width: 50%;
width: 300px;
height: 300px;
}
.image {
display: inline-block;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
opacity: 0;
transition: .5s ease;
border-radius: 160px;
background-color: lightpink;
}
.container1:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 16px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}

<div class="content-wrap">
<h2 style="text-align: center;">Invest In Your Future</h2>
<p style="text-align: center;">
Leverage agile frameworks to provide a robust synopsis for high level overviews.
</p>
<div class="middleimgs">
<div class="container1">
<img src="https://picsum.photos/300/300" alt="pound sign linked" width="300px" height="300px" class="image">
<div class="overlay">
<div class="text">Targeting vertical integration with a goal to maximise share of voice.</div>
</div>
</div>
<div class="container1">
<img src="https://picsum.photos/300/300" alt="investing money" width="300px" height="300px" class="image">
<div class="overlay">
<div class="text">Leverage agile frameworks to provide a robust synopsis for high level overviews.</div>
</div>
</div>
<div class="container1">
<img src="https://picsum.photos/300/300" alt="community" width="300px" height="300px" class="image">
<div class="overlay">
<div class="text">Leverage blue-sky thinking while remembering to be transparent.</div>
</div>
</div>
</div>
</div>