Related Articles

Related Articles

How to make photo sliding effect using HTML and CSS ?
  • Last Updated : 18 Nov, 2020

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <div class="addition">
        <section class="slideshow">
            <div class="content">
                <div class="content-carrousel">
                    <figure class="shadow">
                        <img src=
                    </figure>
                    <figure class="shadow">
                        <img src=
                    </figure>
                    <figure class="shadow">
                        <img src=
                    </figure>
                    <figure class="shadow">
                        <img src=
                    </figure>
                    <figure class="shadow">
                        <img src=
                    </figure>
                    <figure class="shadow">
                        <img src=
                    </figure>
                </div>
            </div>
        </section>
    </div>
</body>
  
</html>

chevron_right


CSS Code: Let us talk about the CSS part of the code. Some basic attributes are used like margin, padding, position, float, border, animaton, 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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


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

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
                    </figure>
                    <figure class="shadow">
                        <img src=
                    </figure>
                    <figure class="shadow">
                        <img src=
                    </figure>
                    <figure class="shadow">
                        <img src=
                    </figure>
                    <figure class="shadow">
                        <img src=
                    </figure>
                    <figure class="shadow">
                        <img src=
                    </figure>
                </div>
            </div>
        </section>
    </div>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :