Выровнять изображения рядом с парением

Question

<div align="center">
<div class="container2">
      <a href="D:/Games/CIC/MFWS/discussion.html"><img src="img/3.png" alt="discussion Threads" class="image" height="200px" width="150px"></a>
    <div class="overlay">
        <div class="text">Here you can discuss different topics and ask or answer questions.</div>
    </div>
</div>
<div class="container2">
        <img src="download.png" alt="Avatar" class="image">
        <div class="overlay overlay2">
            <div class="text">Bottom</div>
        </div>
</div>
<div class="container2">
    <img src="download.png" alt="Avatar" class="image">
    <div class="overlay overlay3">
        <div class="text">Bottom</div>
    </div>
</div>
</div> 

Я хочу сделать изображения рядом друг с другом, но я не могу понять, почему или как это так. css Я перепробовал все, что не работает. Я хочу, чтобы 3 изображения были рядом наведение и подпись, на данный момент у меня есть 3 изображения, идущие сверху вниз, наведение хорошо, но не рядом. Как сделать так, чтобы изображения появлялись рядом? Спасибо.

.container2 {
  position: relative;
  width: 250px;
}

.image {
  display: block;
  width: 250px;
  height: 300px;
  height: auto;
  margin: 17%;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #4CAF50;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
  margin-left: 17%;
  border-top-left-radius: 70px;
  border-top-right-radius: 70px;
  pointer-events: none
}

.container2:hover .overlay {
  height: 85%;
}

.text {
  color: white;
  font-size: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
.overlay2 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #4CAF50;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
  margin-left: 17%;
  border-top-left-radius: 70px;
  border-top-right-radius: 70px;
  pointer-events: none
}
.container2:hover .overlay2 {
  height: 85%;
}
.overlay3 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #4CAF50;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
  margin-left: 17%;
  border-top-left-radius: 70px;
  border-top-right-radius: 70px;
  pointer-events: none
}
.container2:hover .overlay3 {
  height: 85%;
}

Answer 1

.container {
  width: 400px;
  height: 400px;
  padding: 0px;
  display: grid;
  grid-template-columns: auto auto auto;
}

.item {
  width: 100px;
  height: 200px;
  margin: 2px;
}

<div class="container">
  <div class="item" style="background-color:red">

  </div>
  <div class="item" style="background-color:blue">

  </div>
  <div class="item" style="background-color:yellow">

  </div>
</div>

Почему бы вам не отобразить свойство сетки?

Это может помочь вам

Answer 2

Для таких сценариев ios существует красивая / чистая / простая концепция, называемая flex, которая помогает уменьшением числа строк кода:

, вот пример с column, color и hover эффект, надеюсь, он вам поможет:

#MainDiv {
  height: 200px;
  width: 650px;
  display: flex;
  /* here is a concept */
  flex-direction: row;
  /* you can either change it to row/columns */
  padding: 5px;
}

#firstDiv {
  width: 200px;
  margin: 5px;
  background-color: red;
}

#secondDiv {
  width: 200px;
  margin: 5px;
  background-color: blue;
}

#thirdDiv {
  width: 200px;
  margin: 5px;
  background-color: green;
}

#firstDiv:hover {
  background-color: blue;
  color: white;
}

#secondDiv:hover {
  background-color: green;
  color: white;
}

#thirdDiv:hover {
  background-color: red;
  color: white;
}

<div id="MainDiv">
  <div id="firstDiv">First Div</div>
  <div id="secondDiv">Second Div</div>
  <div id="thirdDiv">Third Div</div>
</div>

Answer 3

Вы должны добавить свойство float к вашему container2 селектору. Пожалуйста, проверьте правило css ниже.

.container2 {
  float: left;
  position: relative;
  width: 250px;
}