~The Code for Photo Gallery~

By StarsInDust

2/26/2024

The HTML

<div class="container">
<!-- heading text -->
<ul class="image-gallery">
<!—Start of images -->

<li>
<img src="Images/About/Education.png" alt="" width = "300"/>
<div class="overlay"><span>Let's Learn</span></div>
</li>

<li>
<img src="Images/About/Ambitious.png" alt="" width = "300"/>
<div class="overlay"><span>Ambition is a Goal</span></div>
</li>

<li>
<img src="Images/About/Caring.png" alt="" width = "300"/>
<div class="overlay"><span>Time to Care</span></div>
</li>


<li>
<img src="Images/About/Family.png" alt="" width = "300"/>
<div class="overlay"><span>Spend it with the ones we Love</span></div>
</li>

<li>
<img src="Images/About/Integrety.png" alt="" width = "300"/>
<div class="overlay"><span>Integrety is a Grand Quality</span></div>
</li>

<li>
<img src="Images/About/Diplomatic.png" alt="" width = "300"/>
<div class="overlay"><span>With Justice for All</span></div>
</li>

<!—End of images -->

</ul>
</div>

The CSS

<style type="text/css">

.main .container {
background-color: #00050F;
}

.image-gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}

.image-gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}

.image-gallery > li {
/* ... */
position: relative;
cursor: pointer;
list-style-type: none;
}

.image-gallery li img {
object-fit: cover;
max-width: 100%;
height: auto;
vertical-align: middle;
border-radius: 5px;
}

.overlay {
position: absolute;
width: 100%;
height: 100%;
background: rgba(57, 57, 57, 0.502);
top: 0;
left: 0;
transform: scale(0);
transition: all 0.2s 0.1s ease-in-out;
color: #fff;
border-radius: 5px;
/* center overlay text */
display: flex;
align-items: center;
justify-content: center;
}

/* hover */
.image-gallery li:hover .overlay {
transform: scale(1);
}

.image-gallery::after {
content: "";
flex-basis: 350px;
}

.main .LH2Silver {
text-align: center;
}
.main {
background-color: #00050F;
}
</style>