Article Categories

Selected Reading

Image Clip Animation with Sliders using only HTML & CSS

Web Development CSS HTML

Creating an animated image clip with a slider using only HTML and CSS provides an interactive way to display multiple images with smooth circular clip-path transitions. In this tutorial, we'll create an image carousel where each image reveals with a circular animation effect controlled by stylish radio button sliders.

Syntax

.element {
    clip-path: circle(radius at position);
    transition: clip-path duration ease;
}

input[type="radio"]:checked ~ .target {
    clip-path: circle(150% at 0% 100%);
}

Project Setup

You'll need to set up basic HTML and CSS files

index.html (Main HTML file)
style.css (CSS file for styling and animations)
images/ (Folder containing your images)

HTML Structure

The HTML layout consists of hidden radio buttons for controls, image containers for the slides, and visible labels that act as slider buttons

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Image Clip Animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <input type="radio" name="slide" id="one" checked>
        <input type="radio" name="slide" id="two">
        <input type="radio" name="slide" id="three">
        <input type="radio" name="slide" id="four">
        <input type="radio" name="slide" id="five">
        
        <div class="image-container">
            <div class="img img-1">
                <img src="/html/images/html-mini-logo.jpg" alt="HTML">
            </div>
            <div class="img img-2">
                <img src="/css/images/css-mini-logo.jpg" alt="CSS">
            </div>
            <div class="img img-3">
                <img src="/javascript/images/javascript-mini-logo.jpg" alt="JavaScript">
            </div>
            <div class="img img-4">
                <img src="/tailwind_css/images/tailwind-css-mini-logo.jpg" alt="Tailwind CSS">
            </div>
            <div class="img img-5">
                <img src="/nodejs/images/nodejs-mini-logo.jpg" alt="NodeJS">
            </div>
        </div>

        <div class="sliders">
            <label for="one" class="one"></label>
            <label for="two" class="two"></label>
            <label for="three" class="three"></label>
            <label for="four" class="four"></label>
            <label for="five" class="five"></label>
        </div>
    </div>
</body>
</html>

CSS Animation Styling

The CSS creates the circular clip-path animation effect and styles the slider controls. Each image starts with a collapsed circle and expands when its corresponding radio button is checked

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
}

.wrapper {
    position: relative;
    width: 320px;
    height: 120px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.image-container {
    position: relative;
    width: 100%;
    height: 95px;
    overflow: hidden;
    border-radius: 8px;
}

.wrapper .img {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.wrapper .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: circle(0% at 0% 100%);
    transition: clip-path 0.7s ease;
}

/* Animation states for each radio button */
#one:checked ~ .image-container .img-1 img {
    clip-path: circle(150% at 0% 100%);
}

#two:checked ~ .image-container .img-1 img,
#two:checked ~ .image-container .img-2 img {
    clip-path: circle(150% at 0% 100%);
}

#three:checked ~ .image-container .img-1 img,
#three:checked ~ .image-container .img-2 img,
#three:checked ~ .image-container .img-3 img {
    clip-path: circle(150% at 0% 100%);
}

#four:checked ~ .image-container .img-1 img,
#four:checked ~ .image-container .img-2 img,
#four:checked ~ .image-container .img-3 img,
#four:checked ~ .image-container .img-4 img {
    clip-path: circle(150% at 0% 100%);
}

#five:checked ~ .image-container .img-1 img,
#five:checked ~ .image-container .img-2 img,
#five:checked ~ .image-container .img-3 img,
#five:checked ~ .image-container .img-4 img,
#five:checked ~ .image-container .img-5 img {
    clip-path: circle(150% at 0% 100%);
}

/* Slider controls styling */
.wrapper .sliders {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 5px;
}

.wrapper .sliders label {
    border: 2px solid #03df0e;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Active slider styles */
#one:checked ~ .sliders label.one,
#two:checked ~ .sliders label.two,
#three:checked ~ .sliders label.three,
#four:checked ~ .sliders label.four,
#five:checked ~ .sliders label.five {
    width: 35px;
    border-radius: 14px;
    background: #03df0e;
}

.sliders label:hover {
    background: rgba(3, 223, 14, 0.5);
}

input[type="radio"] {
    display: none;
}

Complete Working Example

Here's the complete code combining HTML and CSS for the image clip animation slider

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Image Clip Animation</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f0f0f0;
        }

        .wrapper {
            position: relative;
            width: 320px;
            height: 120px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .image-container {
            position: relative;
            width: 100%;
            height: 95px;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        .wrapper .img {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .wrapper .img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            clip-path: circle(0% at 0% 100%);
            transition: clip-path 0.7s ease;
        }

        #one:checked ~ .image-container .img-1 img {
            clip-path: circle(150% at 0% 100%);
        }

        #two:checked ~ .image-container .img-1 img,
        #two:checked ~ .image-container .img-2 img {
            clip-path: circle(150% at 0% 100%);
        }

        #three:checked ~ .image-container .img-1 img,
        #three:checked ~ .image-container .img-2 img,
        #three:checked ~ .image-container .img-3 img {
            clip-path: circle(150% at 0% 100%);
        }

        #four:checked ~ .image-container .img-1 img,
        #four:checked ~ .image-container .img-2 img,
        #four:checked ~ .image-container .img-3 img,
        #four:checked ~ .image-container .img-4 img {
            clip-path: circle(150% at 0% 100%);
        }

        #five:checked ~ .image-container .img-1 img,
        #five:checked ~ .image-container .img-2 img,
        #five:checked ~ .image-container .img-3 img,
        #five:checked ~ .image-container .img-4 img,
        #five:checked ~ .image-container .img-5 img {
            clip-path: circle(150% at 0% 100%);
        }

        .wrapper .sliders {
            display: flex;
            justify-content: center;
            gap: 6px;
            margin-top: 5px;
        }

        .wrapper .sliders label {
            border: 2px solid #03df0e;
            width: 13px;
            height: 13px;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        #one:checked ~ .sliders label.one,
        #two:checked ~ .sliders label.two,
        #three:checked ~ .sliders label.three,
        #four:checked ~ .sliders label.four,
        #five:checked ~ .sliders label.five {
            width: 35px;
            border-radius: 14px;
            background: #03df0e;
        }

        .sliders label:hover {
            background: rgba(3, 223, 14, 0.5);
        }

        input[type="radio"] {
            display: none;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <input type="radio" name="slide" id="one" checked>
        <input type="radio" name="slide" id="two">
        <input type="radio" name="slide" id="three">
        <input type="radio" name="slide" id="four">
        <input type="radio" name="slide" id="five">
        
        <div class="image-container">
            <div class="img img-1">
                <img src="/html/images/html-mini-logo.jpg" alt="HTML">
            </div>
            <div class="img img-2">
                <img src="/css/images/css-mini-logo.jpg" alt="CSS">
            </div>
            <div class="img img-3">
                <img src="/javascript/images/javascript-mini-logo.jpg" alt="JavaScript">
            </div>
            <div class="img img-4">
                <img src="/tailwind_css/images/tailwind-css-mini-logo.jpg" alt="Tailwind CSS">
            </div>
            <div class="img img-5">
                <img src="/nodejs/images/nodejs-mini-logo.jpg" alt="NodeJS">
            </div>
        </div>

        <div class="sliders">
            <label for="one" class="one"></label>
            <label for="two" class="two"></label>
            <label for="three" class="three"></label>
            <label for="four" class="four"></label>
            <label for="five" class="five"></label>
        </div>
    </div>
</body>
</html>

An interactive image slider with 5 technology logos appears. Each image reveals with a smooth circular clip-path animation from the bottom-left corner. Below the images are green circular slider controls that become elongated when active. Clicking different controls transitions between images with a smooth 0.7-second animation effect.

Key Animation Properties

Property	Purpose	Value
`clip-path`	Creates circular reveal animation	`circle(0% at 0% 100%)` to `circle(150% at 0% 100%)`
`transition`	Smooth animation timing	`clip-path 0.7s ease`
`:checked`	Triggers animation state	Activates when radio button is selected

Conclusion

This image clip animation slider demonstrates the power of CSS clip-path and

Pankaj Kumar Bind

Updated on: 2026-03-15T18:19:01+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next