Pure HTML and CSS slider | CSS Image Slider

 

Hello friends, I am sharing a snippet based on creating an image slider using only HTML and CSS. Those of you who don't yet learn javascript or jquery but trying to make an image carousel, then this snippet will be helpful for you. The slider is not an autoplay slider. You have to click the small image thumbnail, and that particular image will be shown in a large format on top of it. Previously I have shared a snippet on Bootstrap slider with Text Animation. Check that out if you want to make a slider based on bootstrap.

Create an HTML and CSS file and paste the code below in your files. After saving, run the snippet in your browser and make changes according to your needs.

HTML

<div class="box"> <input type="radio" name="animate" id="box1"/> <label for="box1"> <img src="https://i.postimg.cc/c4M7zynm/11.jpg" width="80"/> </label> <img src="https://i.postimg.cc/c4M7zynm/11.jpg"/> <input type="radio" name="animate" id="box2" checked="checked"/> <label for="box2"> <img src="https://i.postimg.cc/253431Xc/12.jpg" width="80"/> </label> <img src="https://i.postimg.cc/253431Xc/12.jpg"/> <input type="radio" name="animate" id="box3"/> <label for="box3"> <img src="https://i.postimg.cc/JzzXdymr/13.jpg" width="80"/> </label> <img src="https://i.postimg.cc/JzzXdymr/13.jpg"/> <input type="radio" name="animate" id="box4"/> <label for="box4"> <img src="https://i.postimg.cc/0yXSg82p/14.jpg" width="80"/> </label> <img src="https://i.postimg.cc/0yXSg82p/14.jpg"/> </div>


CSS

body{ background: darkcyan; } .box { width: 1000px; position: relative; padding-top: 320px; margin: 110px auto; height: 100px; box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.8); } .box > img { position: absolute; left: 0; top: 0; transition: all 0.5s; width: 100%; height: 420px; } .box input[name='animate'] { display: none; } .box label { margin: 120px auto auto 120px; border: 5px solid #fff; float: left; cursor: pointer; transition: all 0.5s; opacity: 0.6; } .box label img{ display: block; } .box input[name='animate']:checked+label { border-color: #000; opacity: 1; } .box input[name='animate'] ~ img { opacity: 0; transform: scale(1.1); } .box input[name='animate']:checked+label+img { opacity: 1; transform: scale(1); }


I hope it helps. Thank you for visiting the blog, and please follow our social media profiles so that you will get notifications for our future posts.