Sun Jun 02 2024
Creative and Stunning Image Gallery
JavaScript49 views
![Creative and Stunning Image Gallery](/_next/image?url=https%3A%2F%2Fcdn.geekboots.com%2Fgeek%2Fcreative-image-gallery-vidImg-1717328146379.webp&w=3840&q=75)
File Name: creative-image-gallery.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Creative Gallery</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #212121;
}
.container {
width: 100%;
max-width: 1100px;
margin: 0 auto;
}
aside#bigImg {
width: 100%;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
aside#bigImg img {
width: auto;
height: 350px;
border-radius: 8px;
filter: drop-shadow(0 5px 10px #afafaf7a);
}
ul#imgList {
list-style: none;
width: 100%;
display: flex;
gap: 15px;
justify-content: center;
}
ul#imgList li {
width: 100px;
height: 150px;
}
ul#imgList li img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
cursor: pointer;
transition: 0.3s all ease-in-out;
}
ul#imgList:hover li img {
filter: grayscale(100%) blur(1px);
}
ul#imgList:hover li:hover img {
filter: grayscale(0%) blur(0);
transform: translateY(-10%);
}
</style>
</head>
<body>
<div class="container">
<aside id="bigImg"></aside>
<ul id="imgList"></ul>
</div>
<script>
const imgList = [
"https://cdn.pixabay.com/photo/2019/06/22/05/29/woman-4290853_960_720.jpg",
"https://cdn.pixabay.com/photo/2020/12/13/16/37/woman-5828786_960_720.jpg",
"https://cdn.pixabay.com/photo/2020/01/17/16/26/portrait-4773351_960_720.jpg",
"https://cdn.pixabay.com/photo/2016/01/15/08/02/girl-1141279_960_720.jpg",
"https://cdn.pixabay.com/photo/2018/02/14/21/45/woman-3153999_960_720.jpg",
];
const bigImg = document.getElementById("bigImg");
const ulList = document.getElementById("imgList");
const listImages = () => {
imgList.forEach((img, index) => {
const newList = document.createElement("li");
const nImg = new Image();
nImg.src = img;
nImg.addEventListener("click", () => {
selectedImg(index);
});
newList.appendChild(nImg);
ulList.appendChild(newList);
});
};
const selectedImg = (pos) => {
const bImg = new Image();
bImg.src = imgList[pos];
while (bigImg.firstChild) {
bigImg.removeChild(bigImg.firstChild);
}
bigImg.appendChild(bImg);
};
listImages();
selectedImg(0);
</script>
</body>
</html>
Author:Geekboots