Blog Card Slider using HTML and CSS

Hello coders,

In this article, you will learn to create a Card Slider using HTML CSS. Click on the click image button to see the image. Click on those three slider buttons to slide to next card.

Follow these simple steps to make a Card Slider:

1) Open any code editor like Visual Studio.
2) Create HTML, CSS files and put them in your project folder which you create.
3) Link the CSS File With HTML File.
4) Copy the HTML code, which I gave below, and paste it into the HTML which you create.

HTML Code:

<!DOCTYPE html>
<html lang="en">
<!--www.codeithub.com-->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <div class="blog-card">
        <input type="radio" name="select" id="tap-1" checked>
        <input type="radio" name="select" id="tap-2">
        <input type="radio" name="select" id="tap-3">
        <input type="checkbox" id="imgTap">
        <div class="sliders">
            <label for="tap-1" class="tap tap-1"></label>
            <label for="tap-2" class="tap tap-2"></label>
            <label for="tap-3" class="tap tap-3"></label>
        </div>
        <div class="inner-part">
            <label for="imgTap" class="img">
                <img class="img-1" src="bg2.jpg">
            </label>
            <div class="content content-1">
                <span>Blog Card</span>
                <div class="title">
                    Sky</div>
                <div class="text">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo animi atque aliquid pariatur
                    voluptatem numquam, quisquam. Neque est voluptates doloribus!</div>
                <button>click image</button>
            </div>
        </div>
        <div class="inner-part">
            <label for="imgTap" class="img">
                <img class="img-2" src="bg5.jpg">
            </label>
            <div class="content content-2">
                <span>Blog Card</span>
                <div class="title">
                    Ocean</div>
                <div class="text">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum eos ut consectetur numquam ullam
                    fuga animi laudantium nobis rem molestias.</div>
                <button>click image</button>
            </div>
        </div>
        <div class="inner-part">
            <label for="imgTap" class="img">
                <img class="img-3" src="bg6.png">
            </label>
            <div class="content content-3">
                <span>Blog Card</span>
                <div class="title">
                    Bali</div>
                <div class="text">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod excepturi nemo commodi sint eum ipsam
                    odit atque aliquam officia impedit.</div>
                <button>click image</button>
            </div>
        </div>
    </div>
</body>

</html>

CSS Code:

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: linear-gradient(150deg,#23ccf6 0%, #4e43f0 74%);
}
.blog-card{
  position: absolute;
  height: 370px;
  width: 95%;
  max-width: 850px;
  margin: auto;
  border-radius: 25px;
  background: white;
  box-shadow: 0px 10px 50px #faf5f5ea;
}
.inner-part{
  position: absolute;
  display: flex;
  height: 360px;
  align-items: center;
  justify-content: center;
  padding: 0 25px;
}
#imgTap:checked ~ .inner-part {
  padding: 0;
  transition: .1s ease-in;
}
.inner-part .img{
  height: 280px;
  width: 260px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 2px 3px 15px #f7f3f3e7;
}
#imgTap:checked ~ .inner-part .img{
  height: 370px;
  width: 850px;
  z-index: 99;
  margin-top: 10px;
  transition: .3s .2s ease-in;
}
.img img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  cursor: pointer;
  opacity: 0;
  transition: .6s;
}
#tap-1:checked ~ .inner-part .img-1,
#tap-2:checked ~ .inner-part .img-2,
#tap-3:checked ~ .inner-part .img-3{
  opacity: 1;
  transition-delay: .2s;
}
.content{
  padding: 0 20px 0 35px;
  width: 530px;
  margin-left: 50px;
  opacity: 0;
  transition: .6s;
}
#imgTap:checked ~ .inner-part .content{
  display: none;
}
#tap-1:checked ~ .inner-part .content-1,
#tap-2:checked ~ .inner-part .content-2,
#tap-3:checked ~ .inner-part .content-3{
  opacity: 1;
  margin-left: 0px;
  z-index: 100;
  transition-delay: .3s;
}
.content span{
  display: block;
  color: #7b7992;
  margin-bottom: 15px;
  font-size: 22px;
  font-weight: 500
}
.content .title{
  font-size: 30px;
  font-weight: 700;
  color: #0d0925;
  margin-bottom: 20px;
}
.content .text{
  color: #4e4a67;
  font-size: 19px;
  margin-bottom: 30px;
  line-height: 1.5em;
  text-align: justify;
}
.content button{
  display: inline-flex;
  padding: 15px 20px;
  border: none;
  font-size: 16px;
  text-transform: uppercase;
  color: #fff0e6;
  font-weight: 600;
  letter-spacing: 1px;
  border-radius: 50px;
  cursor: pointer;
  outline: none;
  border: 1px solid #23ccf6;
  background:  #4e43f0;
}
.content button:hover{
  background: linear-gradient(150deg, #23ccf6 0%, #4e43f0 74%);
}
.sliders{
  position: absolute;
  bottom: 25px;
  left: 65%;
  transform: translateX(-50%);
  z-index: 12;
}
#imgTap:checked ~ .sliders{
  display: none;
}
.sliders .tap{
  position: relative;
  height: 10px;
  width: 50px;
  background: #d9d9d9;
  border-radius: 5px;
  display: inline-flex;
  margin: 0 3px;
  cursor: pointer;
}
.sliders .tap:hover{
  background: #cccccc;
}
.sliders .tap:before{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: 100%;
  width: -100%;
  background: linear-gradient(150deg,#23ccf6 0%, #4e43f0 74%);
  border-radius: 10px;
  transform: scaleX(0);
  transition: transform .6s;
  transform-origin: left;
}
input[type="radio"],
input[type="checkbox"]{
  display: none;
}
#tap-1:checked ~ .sliders .tap-1:before,
#tap-2:checked ~ .sliders .tap-2:before,
#tap-3:checked ~ .sliders .tap-3:before{
  transform: scaleX(1);
  width: 100%;
}

OUTPUT

See also  1000+ Modern Image Hover Effects In Pure CSS - Izmir.css

Examples:

Glow Button

Create 3D Flip Effect section

Responsive Template using HTML CSS

Leave a Reply

Your email address will not be published. Required fields are marked *