使用 3 张图像在 css 中创建内联翻转图像

问题描述

我是 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 完成更好，也请告诉我。

谢谢！

解决方法

你非常接近！看起来只需要进行一些更改。首先，您的 :hover 应该使用 .container1 元素而不是 .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>