Build A Responsive Parallax Flipping Cards Using HTML and CSS

By Bytewebster - March 26, 2023

Welcome to bytewebster front-end projects on build a responsive parallax flipping cards using html and css. In this project, we will walk you through the stages of creating attractive flipping cards. You will learn how to apply parallax effects to your cards to give a sense of depth and interactivity.

Working

This Responsive Parallax Flipping Cards are a common design concept that can be accomplished with HTML and CSS. The main concept is to construct a card-like structure that, when clicked or hovered over, flips or rotates, revealing more material on the reverse of the card.

Direct Download

Detailed Overview of Project

This effect is created by combining CSS 3D transformations and transitions. The HTML structure is commonly made up of a container element and two child elements, one for the front and one for the back of the card.

The parallax and flipping effects are created by applying CSS styles to these components. here we ensure that the cards are responsive and adjust to different screen sizes, for that CSS media queries can be used to adjust the styles for different viewport widths.

HTML Structure

Let's start with making its HTML structure, Firstly it creates a container with four columns, each containing a card with a front and back. The card's front contains paragraph and some text, while the back has a longer.

Next the div tag with the class wrapper is the outermost container that wraps around all the columns. Inside this div tag is another div tag with the class cols, which contains the four columns.

Each and every column is created using a div tag with the class col. The ontouchstart attribute specifies a JavaScript function that will be called when the user touches the card, toggling the hover class on and off.

<div class="wrapper">
  <div class="cols">
    <div class="col" ontouchstart="this.classList.toggle('hover');">
      <div class="container">
        <div class="front" style="background-image: url()">
          <div class="inner">
            <p>Yoru</p><span>Lorem ipsum</span>
          </div>
        </div>
        <div class="back">
          <div class="inner">
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="col" ontouchstart="this.classList.toggle('hover');">
      <div class="container">
        <div class="front" style="background-image: url()">
          <div class="inner">
            <p>Viper</p><span>Lorem ipsum</span>
          </div>
        </div>
        <div class="back">
          <div class="inner">
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="col" ontouchstart="this.classList.toggle('hover');">
      <div class="container">
        <div class="front" style="background-image: url()">
          <div class="inner">
            <p>Sova</p><span>Lorem ipsum</span>
          </div>
        </div>
        <div class="back">
          <div class="inner">
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="col" ontouchstart="this.classList.toggle('hover');">
      <div class="container">
        <div class="front" style="background-image: url()">
          <div class="inner">
            <p>Omen</p><span>Lorem ipsum</span>
          </div>
        </div>
        <div class="back">
          <div class="inner">
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

The front of the card is created using a div tag with the class front, which has a background-image property that is currently set to an empty URL. You can put any image in it, it will not make any difference to the shape of the card.

The back of the card is created using a div tag with the class back, Inside the div tag with the class back is another div tag with the class inner. The inner div contains a single paragraph element (p) with Lorem Ipsum text. In this you can describe something or you can also write about someone.

When the user hovers over the front of the card, the hover class is toggled on the parent col div using the ontouchstart JavaScript function specified on each col element. This will cause the card to flip over, revealing the back of the card with the longer description.

Styling With CSS

Till now we have made only the structure of these cards, now comes the most important work. it's time to design these cards with CSS.

First of all we will start with designing the wrapper class. the .wrapper sets the width and max-width of the component and centers it horizontally using the margin property. the width of the container to 90% of its parent element's width and it also sets the top and bottom margins to 0.

next comes the .cols it is a class selector that applies to a group of elements that will be displayed in a flexbox layout. in this the display mode of the element to a flexible container, so that its child elements can be arranged using flexbox properties.

.wrapper{
  width: 90%;
  margin: 0 auto;
  max-width: 80rem;
}

.cols{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.col{
  width: calc(25% - 2rem);
  margin: 1rem;
  cursor: pointer;
}

.container{
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}

.front,
.back{
  background-size: cover;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.25);
  border-radius: 10px;
  background-position: center;
  -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  text-align: center;
  min-height: 280px;
  height: auto;
  border-radius: 10px;
  color: #fff;
  font-size: 1.5rem;
}

.back{
  background: #cedce7;
  background: -webkit-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
  background: -o-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
}
}

.front:after{
  position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    opacity: 0.5;
    background-color: #000;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    border-radius: 10px;
}
.container:hover .front,
.container:hover .back{
    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.back{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.inner{
    -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
            transform: translateY(-50%) translateZ(60px) scale(0.94);
    top: 50%;
    position: absolute;
    left: 0;
    width: 100%;
    padding: 2rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    outline: 1px solid transparent;
    -webkit-perspective: inherit;
            perspective: inherit;
    z-index: 2;
}

.container .back{
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.container .front{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.container:hover .back{
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.container:hover .front{
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.front .inner p{
  font-size: 2.9rem;
  margin-bottom: 2rem;
  position: relative;
  font-family: 'Edu NSW ACT Foundation', cursive;
}

.front .inner p:after{
  content: '';
  width: 4rem;
  height: 2px;
  position: absolute;
  background: #C6D4DF;
  display: block;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -.75rem;
}

.front .inner span{
  color: rgba(255,255,255,0.7);
  font-family: 'Montserrat';
  font-weight: 300;
}

@media screen and (max-width: 64rem){
  .col{
    width: calc(33.333333% - 2rem);
  }
}

@media screen and (max-width: 48rem){
  .col{
    width: calc(50% - 2rem);
  }
}

@media screen and (max-width: 32rem){
  .col{
    width: 100%;
    margin: 0 0 2rem 0;
  }
}

lastly .col is a class selector that applies to each of the child elements within the .cols container. the width Sets the width of each column to 25% of the width of the .cols container, minus 2rem. The calc() function is used to subtract 2rem from the width calculation.

And .front and .back style the front and back face of the card, respectively. They set the background, border-radius, height, and font-size of the card. They also use transitions to animate the transform property when the card is hovered.

.front:after creates a semi-transparent overlay over the front face of the card. and .inner styles the content inside the card, setting its position and padding.

.container .back and .container .front use transforms to rotate the back and front faces 180 degrees around the Y-axis, making them invisible when they're not supposed to be shown.

.front .inner p styles the text content of the card by setting the font-size, margin-bottom, and font-family of the paragraph element.

We appreciate you taking the time to read this article, and hope that you found the project to be enjoyable.

Video of the Project

jQuery Responsive Timeline Carousel

Sliding Signup and Login Form

Bootstrap Admin Dashboard Template

Javascript Card slider parallax effect

Take This Short Survey!

Download Source Code Files

From here You can download the source code files of this Responsive Parallax Flipping Cards.
If you are just starting in web development, these snippets will be useful. We would appreciate it if you would share our blog posts with other like-minded people.