I'm looking to create a driver's page where the desktop view displays images horizontally instead of vertically. I've tried adjusting the display attribute with limited success, and so far, the grid display is the closest I've come to achieving my desired layout. I'm still relatively new to this, so any assistance would be greatly appreciated. Thank you! Here is a snippet of my code:
Html Code:
<div class="drivers-container">
<div class="driver-row">
<!--Drivers from Spain-->
<h2><a id="spain" href="#spain">Spain</a></h2>
<div class="image2">
<img src="Drivers/EFREN LLARENA (Spain) 2.jpg" alt="Efren Llarena" width="500">️;
<div class="details">
<h2><span>Efren Llarena</span></h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt explicabo perferendis mollitia iste libero magni ab! Ipsam id beatae nesciunt?.</p>
</div>
</div>
<div class="image2">
<img src="Drivers/Sara Fernandez (Spain).jpg" alt="Sara Fernandez" width="500" height="400">️;
<div class="details">
<h2><span>Sara Fernandez</span></h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt explicabo perferendis mollitia iste libero magni ab! Ipsam id beatae nesciunt?.</p>
</div>
</div>
</div>
Sara Fernandez (Spain) Efren-Llarena (Spain)
CSS Code;
.driver-row h2 a{
color: #fff;
text-decoration: none;
font-size: 70px;
font-weight: 300;
}
.drivers-container{
margin: 30px;
}
.driver-row{
width: 100%;
display: grid;
justify-content: center;
flex-wrap: wrap;
}
.image2{
background: #000000;
position: relative;
flex: 1;
max-width: 460px;
height: 300px;
margin: 20px;
overflow: hidden;
}
.image2 img{
opacity: 0.8;
position: relative;
vertical-align: top;
transition: 0.6s;
transition-property: opacity;
}
.image2:hover img{
opacity: 1;
}
.image2 .details{
z-index: 1;
position: absolute;
top: 0;
right: 0;
color: rgb(0, 0, 0);
width: 100%;
height: 100%;
}
.image2 .details h2{
text-align: center;
font-size: 35px;
text-transform: uppercase;
font-weight: 300;
margin-top: 70px;
transition: 0.4s;
transition-property: transform;
}
.image2 .details h2 span{
font-weight: 900;
}
.image2:hover .details h2{
transform: translateY(-30px);
}
.image2 .details p{
margin: 30px 30px 0 30px;
font-size: 18px;
font-weight: 600;
text-align: center;
opacity: 0;
transition: 0.6s;
transition-property: opacity,transform;
}
.image2:hover .details p{
opacity: 1;
transform: translateY(-40px);
}