Hello developers, today in this blog, you'll learn to create an Image Clip Animation using HTML & CSS.
The clip animation is done with a clip-path CSS property that allows you to specify the region of an image, rather than showing a complete area. It helps to cover up the section you want in many shapes like square, circle, polygon, rectangular, etc.
In this blog Image Clip Animation, there are five images but only a single image will appear at the front and four images are covered up with clip-path. There are slider buttons on the bottom of the image which works manually by clicking on the button. These buttons slide the images forward and backward one by one on a button click. By clicking on the button you can see the images as you want.
The source code of this Image Clip Animation is given below, if you want the source code of this program, you can copy it. You can use this Image Clip Animation with your creativity and can take this project to the next level.
Image Clip Animation [Source Code]
To make this website, you would like to make two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
/* background: -webkit-linear-gradient(136deg, #ff8c94, #ffd3b5);
background: -webkit-linear-gradient(136deg, #e1717a, #ff8c94);*/
background: -webkit-linear-gradient(136deg, #ffa6ac, #e1717a);
}
.wrapper{
position: relative;
width: 700px;
height: 400px;
}
.wrapper .img{
position: absolute;
width: 100%;
height: 100%;
}
img{
border-radius: 20px;
}
.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 #ffa6ac;
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: #ffa6ac;
}
.sliders label:hover{
background: #ffa6ac;
}
input[type="radio"]{
display: none;
}
.credit{
text-align: center;
color: #000;
margin: 10px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
text-decoration: none;
color:#000;
font-weight: bold;
}
Thank you for reading our blog. If you face any problem in creating this Image Clip Animation using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team