Currently, I am facing a roadblock while transitioning my design concept into actual code. My main concern lies with creating this art piece. Although the gallery is up and running with all the images in place, I'm encountering difficulties with the spacing, color scheme beneath the pictures, and adding captions. Whenever I try to include captions, the images tend to spread out more than expected. Can someone assist me in executing this vision? My primary focus is on fine-tuning the spacing, colors, and captions, keeping in mind that the gallery already boasts responsive features. Any form of help would be greatly appreciated. Thank you for your time and consideration. Below is the code I've put together so far. Click on the "Full Page" link to view the snippet.
.intro {
margin-top: 70px;
text-align: center;
margin-bottom: 40px;
}
.gallery_container-all {
width: 95%;
margin: 20px auto;
height: auto;
margin-bottom: 40px;
}
#outside{
background-color: lightcyan;
}
.gallery_container {
width: calc(33% - 6px);
overflow: hidden;
height: fit-content;
margin: 3px;
padding: 0;
display: inline-block;
position: relative;
float: none;
border-radius: 5px;
background-color: black;
}
img {
width: 100%;
transition-duration: 0.3s;
max-width: 100%;
display: block;
overflow: hidden;
cursor: pointer;
}
.gallery_title {
position: absolute;
display: block;
cursor: pointer;
top: 35%;
display: none;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
font-weight: bold;
font-size: 1.6em;
transition-duration: 0.3s;
}
.gallery_text {
position: absolute;
top: 70%;
cursor: pointer;
max-width: 80%;
text-align: center;
left: 50%;
font-size: 1em;
display: none;
margin-right: -50%;
transition-duration: 0.3s;
transform: translate(-50%, -50%);
}
.gallery_container:hover img {
transform: scale(1.2);
transition-duration: 0.3s;
opacity: 0.5;
}
.gallery_container:hover span {
color: white;
display: block;
transition-duration: 0.3s;
}
@media only screen and (max-width: 800px) {
.intro {
margin-top: 40px;
}
.gallery_container {
width: 100%;
margin-left: auto;
margin-right: auto;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id = "outside">
<div class="intro">
<h1>Earth</h1>
<h4>Here are some pictures of Earth</h4>
</div>
<div class="gallery_container-all">
<div class="gallery_container thefirst">
<img src="https://images.pexels.com/photos/5554114/pexels-photo-5554114.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Image description goes here">
</div>
<div class="gallery_container">
</div>
<div class="gallery_container thesecond">
<img src="https://images.pexels.com/photos/4300360/pexels-photo-4300360.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Image description goes here">
</div>
<div class="gallery_container thethird">
<img src="https://images.pexels.com/photos/4555540/pexels-photo-4555540.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Image description goes here">
</div>
<div class="gallery_container">
</div>
<div class="gallery_container thefourth">
<img src="https://images.pexels.com/photos/5254697/pexels-photo-5254697.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Image description goes here">
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>