Align Images Side By Side with hover - html

Question

<div align="center">
<div class="container2">
<img src="img/3.png" alt="discussion Threads" class="image" height="200px" width="150px">
<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>