How to make photo sliding effect using HTML and CSS ?

Last Updated : 30 Jul, 2024

It is an easy and amazing animation effect created with HTML and CSS, where the photos are moving horizontally one by one like a roller. When the mouse pointer comes upon the photo then the specific photo stops moving.

Approach: The basic idea of these animation comes from the hover effect of CSS animation. Let us see how the code works.

HTML code: The photos will be moving in a circular ring using HTML. To create the animation, we have taken a "div" and a section to maintain the area of the photos properly and the class name is used in the CSS code. We used HTML figure and img tag for the photos which will be shown in the page.

HTML

<!DOCTYPE html>
<html>

<body>
    <div class="addition">
        <section class="slideshow">
            <div class="content">
                <div class="content-carrousel">
                    <figure class="shadow">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201105170558/geeks112.png">
                    </figure>
                    <figure class="shadow">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201105170611/geeks28.png">
                    </figure>
                    <figure class="shadow">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201105170619/geeks33.png">
                    </figure>
                    <figure class="shadow">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201105170627/geeks41.jpg">
                    </figure>
                    <figure class="shadow">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201105170635/geeks51.jpg">
                    </figure>
                    <figure class="shadow">
                        <img src=
"https://media.geeksforgeeks.org/wp-contentuploads/20201105170644/geeks61.jpg">
                    </figure>
                </div>
            </div>
        </section>
    </div>
</body>

</html>

CSS Code: Let us talk about the CSS part of the code. Some basic attributes are used like margin, padding, position, float, border, animation, etc which will help the photos giving them the right position. It helps to rotate the photos in 2D. First it rotates around its own axis. Then the whole "div" rotates around its axis.

To create this animation, figure:nth-child("no. of child") property is used. The transform:rotateY(amount of deg) and translateZ(--px) are the two attributes of CSS which helps to rotate the object.

CSS

<style>
    body {
        background-color: #000000;
    }

    .addition {
        margin-left: 35%;
        margin-top: 10%;
    }

    .slideshow {
        position: centre;
        margin: 0 auto;
        padding-top: 50px;
        height: 250px;
        background-color: rgb(10, 10, 10);
        box-sizing: border-box;
    }

    .content {
        margin: auto;
        width: 190px;
        perspective: 1000px;
        position: relative;
        padding-top 80px;
    }

    .content-carrousel {
        padding-left: 40px;

        /* This helps to rotate the 
        photo div with respest to 
        axis of an another circle */
        width: 100%;
        position: absolute;
        float: right;
        animation: rotar 15s infinite linear;
        transform-style: preserve-3d;
    }

    .content-carrousel:hover {

        /* This is a hover effect. 
        when the mouse will reach 
        on the photo, the photo 
        will stop moving */
        animation-play-state: paused;
        cursor: pointer;
    }

    .content-carrousel figure {

        /* width of the full image div*/
        width: 100%;

        /* height of the full image div*/
        height: 120px;
        border: 1px solid #4d444d;
        overflow: hidden;
        position: absolute;
    }

    /* The calculation part starts for the angle.
    first, take the number of photos and then divide 
    by 360 and write it in the position of degree */

    .content-carrousel figure:nth-child(1) {
        transform: rotateY(0deg) translateZ(300px);
    }

    .content-carrousel figure:nth-child(2) {
        transform: rotateY(60deg) translateZ(300px);
    }

    .content-carrousel figure:nth-child(3) {
        transform: rotateY(120deg) translateZ(300px);
    }

    .content-carrousel figure:nth-child(4) {
        transform: rotateY(180deg) translateZ(300px);
    }

    .content-carrousel figure:nth-child(5) {
        transform: rotateY(240deg) translateZ(300px);
    }

    .content-carrousel figure:nth-child(6) {
        transform: rotateY(300deg) translateZ(300px);
    }

    .content-carrousel figure:nth-child(7) {
        transform: rotateY(360deg) translateZ(300px);
    }

    .slideshow {
        position: absolute;
        box-shadow: 0px 0pz 20px 0px #000;
        border-radius: 2px;
    }

    .content-carrousel img {
        image-rendering: auto;

        /* The photo will move 
        with this velocity */
        transition: all 300ms;
        
        /* width of the photo */
        width: 100%;
        
        /* height of the photo */
        height: 100%;
    }

    .content-carrousel img:hover {
        transform: scale(1.2);
        transition: all 300ms;
    }

    @keyframes rotar {
        from {
            transform: rotateY(0deg);
        }

        to {
            transform: rotateY(360deg);
        }
    }
</style>

Final code: In this section, we will combine the above two sections (HTML and CSS) of code.