Animated Slider Blog Card using HTML & CSS

Hello Readers, Welcome to my other Blog, today in this Blog I'm going to create a animated slider blog card Using HTML and CSS. Slider blog card is animated and so simple for your blog website.

Video Tutorial Of Animated Slider Blog Card Using HTML and CSS:

In the video, you have seen the demo of this and I hope you love it.

Source Code:

index.html

<!DOCTYPE html>
<html lang="en">

<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>Slider Blog Card - Sagar Developer</title>
  <link rel="stylesheet" href="style.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="radio" name="select" id="tap-4" />
    <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>
      <label for="tap-4" class="tap tap-4"></label>
    </div>
    <div class="inner-part">
      <label for="imgTap" class="img">
        <img class="img-1"
          src="https://images.unsplash.com/photo-1504610926078-a1611febcad3?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mzh8fHRlY2hub2xvZ3l8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" />
      </label>
      <div class="content content-1">
        <span>26 Jan 2020</span>
        <div class="title">Lorem Ipsum Dolor</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>Read more</button>
      </div>
    </div>
    <div class="inner-part">
      <label for="imgTap" class="img">
        <img class="img-2"
          src="https://images.unsplash.com/photo-1581090700227-1e37b190418e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzR8fHRlY2hub2xvZ3l8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" />
      </label>
      <div class="content content-2">
        <span>13 Feb 2020</span>
        <div class="title">Lorem Ipsum Dolor</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>Read more</button>
      </div>
    </div>
    <div class="inner-part">
      <label for="imgTap" class="img">
        <img class="img-3"
          src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTd8fHRlY2hub2xvZ3l8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" />
      </label>
      <div class="content content-3">
        <span>12 Mar 2021</span>
        <div class="title">Lorem Ipsum Dolor</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>Read more</button>
      </div>
    </div>
    <div class="inner-part">
      <label for="imgTap" class="img">
        <img class="img-4"
          src="https://images.unsplash.com/photo-1517433456452-f9633a875f6f?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTZ8fHRlY2hub2xvZ3l8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" />
      </label>
      <div class="content content-4">
        <span>18 Nov 2021</span>
        <div class="title">Lorem Ipsum Dolor</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>Read more</button>
      </div>
    </div>
  </div>
</body>

</html>

style.css

@import url("https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600,700,800");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Fira Sans', sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: url(back.svg) no-repeat;
}

.blog-card {
  position: absolute;
  height: 50vh;
  width: 95vw;
  max-width: 850px;
  margin: auto;
  border-radius: 25px;
  background: #fff;
  box-shadow: 0px 10px 50px rgba(252, 56, 56, .3);
}

.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: 260px;
  width: 260px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 2px 3px 15px rgba(252, 56, 56, .1);
}

#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, #tap-4:checked~.inner-part .img-4 {
  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, #tap-4:checked~.inner-part .content-4 {
  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 #041f3d;
  background: linear-gradient( 8deg, #0d5cb2 0%, #000000 74%);
}

.content button:hover {
  background: linear-gradient( 50deg, #5f0a2b 0%, #0d0d23);
}

.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( 147deg, #0d5cb2 0%, #000000 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, #tap-4:checked~.sliders .tap-4:before {
  transform: scaleX(1);
  width: 100%;
}

Sagar Developer

Animated Slider Blog Card using HTML & CSS | Animated Slider |

In the video, you have seen the demo of this and I hope you love it.

Source Code:

0/Post a Comment/Comments

Post a Comment

About Us

Contact Form

Animated Slider Blog Card using HTML & CSS | Animated Slider |

In the video, you have seen the demo of this and I hope you love it.

Source Code:

Related Posts

0/Post a Comment/Comments

Post a Comment

Contact Form