Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Image Clip Animation with Sliders Using Only HTML and CSS
Creating an animated clip with a slider using only HTML and CSS is a great way to display a series of images in a visually appealing and interactive way without using JavaScript in this tutorial, we'll walk you through the process of creating an animated clip effect using pure HTML and CSS, animations are displayed in a circular clip path and transition using the stylish radio buttons as bar controls slider.
Project Setup
You'll need to set up basic HTML and CSS to animate this image clip and make sure your images are ready and have a simple file structure-
- index.html (HTML file)
- style.css (CSS file)
- images/ (folder containing your images)
HTML Structure
The HTML layout consists of radio buttons, image containers, and slider labels. The radio buttons act as selectors for each image slide, and each label corresponds to a radio button to control the slider.
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<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="https://www.tutorialspoint.com/html/images/html-mini-logo.jpg" alt="HTML">
</div>
<div class="img img-2">
<img src="https://www.tutorialspoint.com/css/images/css-mini-logo.jpg" alt="CSS">
</div>
<div class="img img-3">
<img src="https://www.tutorialspoint.com/javascript/images/javascript-mini-logo.jpg" alt="JavaScript">
</div>
<div class="img img-4">
<img src="https://www.tutorialspoint.com/tailwind_css/images/tailwind-css-mini-logo.jpg" alt="Tailwind CSS">
</div>
<div class="img img-5">
<img src="https://www.tutorialspoint.com/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 Styling
Next, add styles to create the animation effect and structure the layout in style.css.
styles.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper {
position: relative;
width: 320px;
/* Increased to accommodate the slider controls */
height: 120px;
display: flex;
flex-direction: column;
gap: 10px;
}
.image-container {
position: relative;
width: 100%;
height: 95px;
overflow: hidden;
}
.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 rgb(3, 223, 14);
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: rgb(3, 223, 14);
}
.sliders label:hover {
background: rgb(3, 223, 14);
}
input[type="radio"] {
display: none;
}
Complete Code Image Clip Animation with Sliders
Here we have combined both the code so you can check the live output on our portal.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<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;
}
.wrapper {
position: relative;
width: 320px;
/* Increased to accommodate the slider controls */
height: 120px;
display: flex;
flex-direction: column;
gap: 10px;
}
.image-container {
position: relative;
width: 100%;
height: 95px;
overflow: hidden;
}
.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 rgb(3, 223, 14);
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: rgb(3, 223, 14);
}
.sliders label:hover {
background: rgb(3, 223, 14);
}
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="https://www.tutorialspoint.com/html/images/html-mini-logo.jpg" alt="HTML">
</div>
<div class="img img-2">
<img src="https://www.tutorialspoint.com/css/images/css-mini-logo.jpg" alt="CSS">
</div>
<div class="img img-3">
<img src="https://www.tutorialspoint.com/javascript/images/javascript-mini-logo.jpg" alt="JavaScript">
</div>
<div class="img img-4">
<img src="https://www.tutorialspoint.com/tailwind_css/images/tailwind-css-mini-logo.jpg" alt="Tailwind CSS">
</div>
<div class="img img-5">
<img src="https://www.tutorialspoint.com/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>
Output
Updated on: 2024-11-07T12:43:13+05:30
1K+ Views
Advertisements