* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
padding: 20px;
}

.gallery-container {
max-width: 1200px;
margin: 0 auto;
}

.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
}

.gallery-item {
position: relative;
overflow: hidden;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
background: #fff;
}

.gallery-item:hover {
transform: scale(1.05);
box-shadow: 0 0 15px #8170cf,
0 0 30px #e0e0e0,
0 0 45px #ffffff;
}

.gallery-item img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
border-radius: 8px;
}

.caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 10px;
transform: translateY(100%);
transition: transform 0.3s ease;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}

.gallery-item:hover .caption {
transform: translateY(0);
}

.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 1000;
}

.modal-content {
margin: 5% auto;
display: block;
width: 80%;
max-width: 800px;
max-height: 80vh;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 0 20px #00ffcc;
}

.close {
position: absolute;
top: 20px;
right: 35px;
color: white;
font-size: 40px;
font-weight: bold;
cursor: pointer;
}

@media (max-width: 768px) {
.gallery {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.gallery-item img {
height: 150px;
}
}

@media (max-width: 480px) {
.gallery {
grid-template-columns: 1fr;
}

.gallery-item img {
height: 200px;
}
}

×

const images = [
{
src: "https://scontent-blr1-2.xx.fbcdn.net/v/t39.30808-6/482228044_17383809970...",
caption: "Dr.J.Harsha, SE(HO&CC),MSO,CWC, Bengaluru inspected the sites Anjanari &Belne bridge",
url: "#slider page url"
},
{
src: "https://scontent-blr1-2.xx.fbcdn.net/v/t39.30808-6/481960154_17383794570...",
caption: "Sh. Ankit Dudeja, Ex. Engg. Cauvery Division delivered 5 lectures on Soil Water Assessment Tool",
url: "#slider page url"
},
{
src: "https://scontent-blr1-2.xx.fbcdn.net/v/t39.30808-6/482207433_17383786237...",
caption: "Monthly Review Meeting under the chairmanship of CE,MSO,CWC",
url: "#slider page url"
},
{
src: "https://scontent-blr1-2.xx.fbcdn.net/v/t39.30808-6/481213416_17305441512...",
caption: "3rd Quarterly Dialogue Meeting of 2024-25 on Hydrological Observations and Flood Forecasting",
url: "#slider page url"
}

];

const gallery = document.querySelector('.gallery');

images.forEach(image => {
const item = document.createElement('div');
item.classList.add('gallery-item');
item.innerHTML = `

${image.caption}
`;
gallery.appendChild(item);
});