I am looking to create a custom grid layout that represents the team's Players, separated by their positions (GK, Defense, Midfielders, and Forwards), similar to the image below. The layout should also be responsive like in image 1.
Currently, the results we are achieving look like this in image 2.
.item1 {
grid-area: main;
}
.item2 {
grid-area: main;
}
.item3 {
grid-area: footer;
}
.item4 {
grid-area: footer;
}
.grid-container {
grid-template-areas: 'main main main main' 'footer footer footer footer';
gap: 30px;
background-color: #000000;
padding: 50px;
display: inline-flex;
justify-content: center;
margin-left: 130px;
margin-right: 5px;
}
.grid-container>div {
background-color: rgb(255, 255, 255);
padding: 60px 30px;
font-size: 30px;
align-content: center;
}
.container {
position: relative;
width: 50%;
}
.overlay {
position: absolute;
top: -60px;
bottom: 0;
left: -30px;
right: 0;
height: 160%;
width: 260%;
opacity: 0%;
transition: .5s ease;
background-color: #343536;
}
.image {
display: block;
width: 200px;
height: 200px;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}<div id="plantel">
<h1 id='Text'>Plantel</h1>
<div class="grid-container">
<div class="item1">
<div class="container">
<img src={jogadores1} alt="Avatar" class="image" />
<div class="overlay">
<p class="text">Roberto</p>
</div>
</div>
</div>
<div class="item1">
<div class="container">
<img src={jogadores2} alt="Avatar" class="image" />
<div class="overlay">
<p class="text">minha</p>
</div>
</div>
</div>
<div class="item1">
<div class="container">
<img src={jogadores3} alt="Avatar" class="image" />
<div class="overlay">
<p class="text">sua</p>
</div>
</div>
</div>
</div>
<div class="grid-container">
<div class="item4">
<div class="container">
<img src={jogadores1} alt="Avatar" class="image" />
<div class="overlay">
<p class="text">Roberto</p>
</div>
</div>
</div>
<div class="item4">
<div class="container">
<img src={jogadores1} alt="Avatar" class="image" />
<div class="overlay">
<p class="text">Roberto</p>
</div>
</div>
</div>
<div class="item4">
<div class="container">
<img src={jogadores1} alt="Avatar" class="image" />
<div class="overlay">
<p class="text">Roberto</p>
</div>
</div>
</div>
</div>