Animation With Image By This Code
HTML Code
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Image Clip Slide 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">
<input type="radio" name="slide" id="six">
<input type="radio" name="slide" id="seven">
<input type="radio" name="slide" id="eight">
<input type="radio" name="slide" id="nine">
<input type="radio" name="slide" id="ten">
<div class="img img-1">
<img src="https://images.unsplash.com/photo-1579273175840-512f9e43f993?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=358&q=80" alt="">
</div>
<div class="img img-2">
<img src="https://images.unsplash.com/photo-1579273166674-bea9b40ba0f7?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=371&q=80" alt="">
</div>
<div class="img img-3">
<img src="https://images.unsplash.com/photo-1579273168855-c63546c129dd?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=393&q=80" alt="">
</div>
<div class="img img-4">
<img src="https://images.unsplash.com/photo-1579273166085-f686ab8435b4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=575&q=80images/img-4.jpg" alt="">
</div>
<div class="img img-5">
<img src="https://images.unsplash.com/photo-1579273166051-40ca02008446?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=682&q=80" alt="">
</div>
<div class="img img-6">
<img src="https://images.unsplash.com/photo-1579273168832-1c6639363dad?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=391&q=80" alt="">
</div>
<div class="img img-7">
<img src="https://images.unsplash.com/photo-1579273166629-ef19c29b11fb?ixid=MXwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDJ8fHxlbnwwfHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="">
</div>
<div class="img img-8">
<img src="https://images.unsplash.com/photo-1579762715459-5a068c289fda?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDF8fHxlbnwwfHx8&auto=format&fit=crop&w=500&q=60" alt="">
</div>
<div class="img img-9">
<img src="https://images.unsplash.com/photo-1578763106314-722e80df97fa?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDN8fHxlbnwwfHx8&auto=format&fit=crop&w=500&q=60" alt="">
</div>
<div class="img img-10">
<img src="https://images.unsplash.com/photo-1579762715118-a6f1d4b934f1?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDR8fHxlbnwwfHx8&auto=format&fit=crop&w=500&q=60" 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>
<label for="six" class="six"></label>
<label for="seven" class="seven"></label>
<label for="eight" class="eight"></label>
<label for="nine" class="nine"></label>
<label for="ten" class="ten"></label>
</div>
</div>
</body>
</html>
CSS Code
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: pink;
}
.wrapper{
position: relative;
width: 700px;
height: 400px;
}
.wrapper .img{
position: absolute;
width: 100%;
height: 100%;
}
.wrapper .img img{
height: 100%;
width: 100%;
object-fit: fixed;
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%);
}
#six:checked ~ .img-1 img,
#six:checked ~ .img-2 img,
#six:checked ~ .img-3 img,
#six:checked ~ .img-4 img,
#six:checked ~ .img-5 img,
#six:checked ~ .img-6 img{
clip-path: circle(150% at 0% 100%);
}
#seven:checked ~ .img-1 img,
#seven:checked ~ .img-2 img,
#seven:checked ~ .img-3 img,
#seven:checked ~ .img-4 img,
#seven:checked ~ .img-5 img,
#seven:checked ~ .img-6 img,
#seven:checked ~ .img-7 img{
clip-path: circle(150% at 0% 100%);
}
#eight:checked ~ .img-1 img,
#eight:checked ~ .img-2 img,
#eight:checked ~ .img-3 img,
#eight:checked ~ .img-4 img,
#eight:checked ~ .img-5 img,
#eight:checked ~ .img-6 img,
#eight:checked ~ .img-7 img,
#eight:checked ~ .img-8 img{
clip-path: circle(150% at 0% 100%);
}
#nine:checked ~ .img-1 img,
#nine:checked ~ .img-2 img,
#nine:checked ~ .img-3 img,
#nine:checked ~ .img-4 img,
#nine:checked ~ .img-5 img,
#nine:checked ~ .img-6 img,
#nine:checked ~ .img-7 img,
#nine:checked ~ .img-8 img,
#nine:checked ~ .img-9 img{
clip-path: circle(150% at 0% 100%);
}
#ten:checked ~ .img-1 img,
#ten:checked ~ .img-2 img,
#ten:checked ~ .img-3 img,
#ten:checked ~ .img-4 img,
#ten:checked ~ .img-5 img,
#ten:checked ~ .img-6 img,
#ten:checked ~ .img-7 img,
#ten:checked ~ .img-8 img,
#ten:checked ~ .img-9 img,
#ten:checked ~ .img-10 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(142,197,252);
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
#five:checked ~ .sliders label.six
#five:checked ~ .sliders label.seven
#five:checked ~ .sliders label.eight
#five:checked ~ .sliders label.nine
#five:checked ~ .sliders label.ten
{
width: 35px;
border-radius: 14px;
background: rgb(142,197,252);
}
.sliders label:hover{
background: rgb(142,197,252);
}
input[type="radio"]{
display: none;
}
Image Slide Output
Posts
38 Comments
Perfect
ReplyDeleteAwesome
ReplyDeleteWonderful
ReplyDeleteExcellent
ReplyDeleteAwesome
ReplyDeleteAwesome
ReplyDeleteAmazing
ReplyDeletevery nice
ReplyDeleteWonderful
ReplyDeleteWonderful
ReplyDeleteExcellent
ReplyDeleteExcellent
ReplyDeleteExcellent
ReplyDeleteKallu excellent
ReplyDeleteExcellent
ReplyDeleteFantastic
ReplyDeleteFantastic
ReplyDeleteFantastic
ReplyDeleteFantastic
ReplyDeleteBrilliant
ReplyDeleteBrilliant
ReplyDeleteBrilliant
ReplyDeleteBrilliant
ReplyDeleteBrilliant
ReplyDeleteBrilliant
ReplyDeleteBrilliant
ReplyDeleteBrilliant
ReplyDeleteBrilliant
ReplyDeleteSuperb Lines
ReplyDeleteAwesome
ReplyDeletePerfect 👌
ReplyDeleteWonderful
ReplyDeleteFantastic job
ReplyDeleteExcellent
ReplyDeleteExcellent
ReplyDeleteAmazing
ReplyDeleteSuperb
ReplyDeleteFantastic
ReplyDelete