In this article, you’ll discover how to create an image slider with clip animation exclusively using HTML and CSS. This animation effect achieved through a CSS property known as clip-path, which enables you to specify a particular region of an image to display, rather than the entire image.
Referring to the image provided, there are a total of five images arranged, but only four are animating using the CSS clip-path property. This property is used to animate an image in a circular shape within a specific area ratio, and you can also try different shapes such as squares, polygons, rectangles, and more. Additionally, there are five radio buttons that allow you to slide images one at a time when clicked. I previously discussed a Responsive Image Slider, which is also quite fascinating to explore from various angles.
After watching the Image Slider with Clip Animation in the video, I hope you now understand the fundamental codes used to create this animation effect. Since this clip animation is solely based on HTML & CSS, even a newbie with only basic knowledge of these languages may easily understand the codes and produce this kind of animation.
An image slider that has clips and animation [source codes]
To create Image Clip Animation with Sliders, it is necessary to generate two files: one HTML file and another CSS file. The codes below should be pasted into your file after creating these files.
Creating an HTML file with the name index.html is the first step, followed by inserting the given codes into the file. It’s crucial to create a file with the .html extension to display the images in this clip animation. In order to utilize the images, you must download the files from the download button provided.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Image Clip Animation | Coding Jasim</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="img img-1">
<img src="images/image-1.jpg" alt="">
</div>
<div class="img img-2">
<img src="images/image-2.jpg" alt="">
</div>
<div class="img img-3">
<img src="images/image-3.jpg" alt="">
</div>
<div class="img img-4">
<img src="images/image-4.jpg" alt="">
</div>
<div class="img img-5">
<img src="images/image-5.jpg" alt="">
</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>In the second step, create a CSS file called style.css and paste the codes into it. It’s important to make sure the file is named with the.css extension.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: rgb(42, 131, 156);
}
.wrapper{
position: relative;
width: 700px;
height: 400px;
}
.wrapper .img{
position: absolute;
width: 100%;
height: 100%;
}
.wrapper .img img{
height: 100%;
width: 100%;
object-fit: cover;
clip-path: circle(0% at 0% 100%);
transition: all 0.7s;
}
#one:checked ~ .img-1 img{
clip-path: circle(150% at 0% 100%);
}
#two:checked ~ .img-1 img,
#two:checked ~ .img-2 img{
clip-path: circle(150% at 0% 100%);
}
#three:checked ~ .img-1 img,
#three:checked ~ .img-2 img,
#three:checked ~ .img-3 img{
clip-path: circle(150% at 0% 100%);
}
#four:checked ~ .img-1 img,
#four:checked ~ .img-2 img,
#four:checked ~ .img-3 img,
#four:checked ~ .img-4 img{
clip-path: circle(150% at 0% 100%);
}
#five:checked ~ .img-1 img,
#five:checked ~ .img-2 img,
#five:checked ~ .img-3 img,
#five:checked ~ .img-4 img,
#five:checked ~ .img-5 img{
clip-path: circle(150% at 0% 100%);
}
.wrapper .sliders{
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 99;
display: flex;
}
.wrapper .sliders label{
border: 2px solid rgb(50, 56, 233);
width: 13px;
height: 13px;
margin: 0 3px;
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: rgb(26, 221, 143);
}
.sliders label:hover{
background: rgb(142,197,252);
}
input[type="radio"]{
display: none;
}Now that you’re done, you have created an image clip animation with sliders using only HTML and CSS. In case your code doesn’t work or you come across any errors or problems, please download the source code files using the download button given. The download is free and a.zip file will be downloaded, which you need to extract.