将图像并排对齐并悬停

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> 

i want to make the images next to each other but i can't idk why or how tbh and this is the css i have tried everything it doesn't work I want 3 images side by side with hover and caption, at the moment I have 3 images going from top to bottom, the hover is good but not side by side. How do I make the images appear side by side? Thanks.

.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

You would have to add float property to your container2 selector. Please check the css rule below.

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

Answer 2

 .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>

Why don't you grid-display property ?

This might help you

Answer 3

For these such scenarios there is a beautiful/clean/simple concept called flex which is helping by decreasing number of lines of code:

here is the example with column , color and hover effect, hope it helps you:

 #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>