Design a Rotating Image Gallery App in HTML CSS & JavaScript

Last Updated : 22 Feb, 2024

We’ll gather some images and build a gallery that can be rotated with straightforward buttons. To rotate the images to the right, we’ll use the right button, and for left rotation, we’ll use the left button. The process will be simple, allowing us to easily rotate the images using these buttons.

Preview Image:

8BallOP

Approach :

To start, we make a folder. In this folder, we put three files for HTML, CSS, and JavaScript.
In the HTML file, we design the layout of the image gallery app. We add images using a link, and we can also use the link for the images. In this case, we use the GFG image link.
In the CSS file, we write some styles to make the visualization more appealing. We also set parameters for rotation.
In the JavaScript file, we write the main logic. This logic enables easy rotation of images from left to right by clicking the corresponding left and right buttons.

Javascript

const imageContainer = 
    document.querySelector('.image-container');
const prevBtn = 
    document.getElementById('prev');
const nextBtn = 
    document.getElementById('next');
const overlay = 
    document.getElementById('overlay');
const popupImg = 
    document.getElementById('popup-img');
const images = 
    document.querySelectorAll('.image-container span img');
 
let x = 0;
prevBtn.addEventListener('click', () => {
    x = x + 45;
    rotate();
});
nextBtn.addEventListener('click', () => {
    x = x - 45;
    rotate();
});
 
images.forEach(image => {
    image.addEventListener('click', () => {
        const src = image.getAttribute('src');
        popupImg.setAttribute('src', src);
        overlay.classList.add('active');
    });
});
 
overlay.addEventListener('click', () => {
    overlay.classList.remove('active');
});
 
function rotate() {
    imageContainer.style.transform = 
        `perspective(1000px) rotateY(${x}deg)`;
}

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Rotating Gallery</title>
    <link rel="stylesheet" href="/style.css">
    <style>
 
    </style>
</head>
 
<body>
    <div class="image-container">
        <span style="--i: 1">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240213150115/ppp.png" alt="">
        </span>
        <span style="--i: 2">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240216133007/20.jpg" alt="">
        </span>
        <span style="--i: 3">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240216140352/Business-Intelligence-Tools.webp"
                alt="">
        </span>
        <span style="--i: 4">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240216134711/stock-vector-food-chain-colored-vector-illustration-2184501363.jpg"
                alt="">
        </span>
        <span style="--i: 5">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240216135604/file.webp" alt="">
        </span>
        <span style="--i: 6">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240216135739/Data-Management-tools.webp"
                alt="">
        </span>
        <span style="--i: 7">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240216141611/file.jpg" alt="">
        </span>
        <span style="--i: 8">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240216141633/2.webp" alt="">
        </span>
    </div>
 
    <div class="overlay" id="overlay">
        <img class="popup-img" id="popup-img" src=""
             alt="Popup Image">
    </div>
 
    <div class="btn-container">
        <button class="btn" id="prev">
            Left
        </button>
        <button class="btn" id="next">
            Right
        </button>
    </div>
 
    <script src="/script.js">
 
    </script>
</body>
 
</html>

CSS

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100vh;
    overflow: hidden;
}
 
.image-container {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    transform: perspective(1000px) rotate(0deg);
    transition: transform 0.7s;
}
 
.image-container span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    cursor: pointer;
    transform: rotateY(calc(var(--i) * 45deg)) translateZ(400px);
    transition: transform 0.3s ease;
}
 
.image-container span img {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 10px;
    width: 80%;
    transition: transform 0.3s ease;
}
 
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
    display: none;
    justify-content: center;
    align-items: center;
}
 
.overlay.active {
    display: flex;
}
 
.popup-img {
    width: 300px;
    height: 300px;
    margin-top: -5%;
    margin-left: -4%;
    background-color: rgb(82, 80, 80);
    border-radius: 15px;
 
}
 
.btn-container {
    position: relative;
    width: 80%;
}
 
.btn {
    position: absolute;
    bottom: -80px;
    background-color: rgb(98, 226, 98);
    color: black;
    font-weight: bold;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}
 
#prev {
    left: 20%;
}
 
#next {
    right: 20%;
}
 
#btn:hover {
    filter: brightness(1.5);
}