Create HTML/CSS Animation Slider

Explore the power of our HTML/CSS animation slider for dynamic website content. Elevate user engagement with our slider animation expertise.

Create HTML/CSS Animation Slider

Check Youtube video to see animation

HTML CODE

<div class="container">

        <ul>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

    </div>

CSS CODE

ul {

        list-style-type: none;

        max-width: 1200px;

        margin: 0 auto;

    }

    ul li {

        position: relative;

        float: left;

        width: 10%;

        height: 600px;

        opacity: 0.6;

        transition: all 0.3s ease-in-out;

    }

    ul li::before {

        height: 100%;

        content: '';

        display: block;

        width: 0;

        transition: all 0.3s ease-in-out;

    }

    ul li:hover,

    ul li:first-child~li:last-child {

        opacity: 1;

        width: 50%;

        transition: all 0.3s ease-in-out;

    }

ul li:hover~li:last-child {

  width: 10%;

  opacity: 0.4;

}

ul li:nth-child(1) {

   background: url(Gallet_clamshell_600x600_movement.jpg) 

        top center no-repeat;

}

ul li:nth-child(2) {

   background: url(https://picsum.photos/id/237/600/600) 

        top right no-repeat;

}

ul li:nth-child(3) {

   background: url(https://picsum.photos/600/600) 

        top center no-repeat;

}

 ul li:nth-child(4) {

   background: url(https://picsum.photos/seed/picsum/600/600) 

        top center no-repeat;

 }

ul li:nth-child(5) {

   background: url(https://picsum.photos/600/600/?blur=1) 

        top center no-repeat;

}

ul li:nth-child(6) {

   background: url(https://picsum.photos/600/600?grayscale) 

        top center no-repeat;

}