How to make photo sliding effect using HTML and CSS ? - GeeksforGeeks

22 Jun, 2021
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.
HTML
<!DOCTYPE html><html> <head>    <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;            width: 100%;            position: absolute;            float: right;            animation: rotar 15s infinite linear;            transform-style: preserve-3d;        }         .content-carrousel:hover {            animation-play-state: paused;            cursor: pointer;        }         .content-carrousel figure {            width: 100%;            height: 120px;            border: 1px solid #4d444d;            overflow: hidden;            position: absolute;        }         .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;            transition: all 300ms;            width: 100%;            height: 100%;        }         .content-carrousel img:hover {            transform: scale(1.2);            transition: all 300ms;        }         @keyframes rotar {            from {                transform: rotateY(0deg);            }             to {                transform: rotateY(360deg);            }        }    </style> </head> <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-content/uploads/20201105170644/geeks61.jpg">                    </figure>                </div>            </div>        </section>    </div></body> </html>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
sagar0719kumar
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Design a web page using HTML and CSS
Form validation using jQuery
How to fetch data from localserver database and display on HTML table using PHP ?
How to Create Time-Table schedule using HTML ?
Search Bar using HTML, CSS and JavaScript
How to Insert Form Data into Database using PHP ?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
Form validation using HTML and JavaScript