Image Clip Animation using HTML & CSS

Image Clip Animation using HTML & CSS

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.

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Image Clip Animation || Learning robo</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <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="https://cdn.pixabay.com/photo/2019/04/06/05/17/wallpaper-4106667__340.jpg" alt=""> </div> <div class="img img-2"> <img src="https://cdn.pixabay.com/photo/2021/08/30/21/29/port-6587129__340.jpg" alt=""> </div> <div class="img img-3"> <img src="https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455__340.jpg" alt=""> </div> <div class="img img-4"> <img src="https://cdn.pixabay.com/photo/2017/10/20/10/58/elephant-2870777__340.jpg" alt=""> </div> <div class="img img-5"> <img src="https://cdn.pixabay.com/photo/2017/07/24/19/57/tiger-2535888__340.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> <div class="credit">Made with <span style="color:white">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </div> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css 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;
} 
We hope you would like this Image Clip Animation using HTML & CSS.

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.

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome