<div class="gallery-row">
<img src="https://placehold.co/400x300/3b82f6/ffffff?text=1" class="thumb" onclick="openLightbox(this)">
<img src="https://placehold.co/400x300/ec4899/ffffff?text=2" class="thumb" onclick="openLightbox(this)">
<img src="https://placehold.co/400x300/10b981/ffffff?text=3" class="thumb" onclick="openLightbox(this)">
</div>
<div id="lightbox" class="lightbox" onclick="this.style.display='none'">
<span class="close-lb">×</span>
<img id="lbImage" class="lb-content">
</div>
.gallery-row {
display: flex;
gap: 15px;
}
.thumb {
width: 150px;
height: 100px;
object-fit: cover;
border-radius: 8px;
cursor: pointer;
transition: transform 0.2s;
}
.thumb:hover {
transform: scale(1.05);
}
.lightbox {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.9);
align-items: center;
justify-content: center;
}
.lb-content {
max-width: 90%;
max-height: 90%;
border-radius: 4px;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.close-lb {
position: absolute;
top: 20px;
right: 35px;
color: #fff;
font-size: 40px;
font-weight: bold;
cursor: pointer;
}