DEV Community

Cover image for Awesome Glass Card with Vanilla-tilt πŸš€
Femil Savaliya
Femil Savaliya

Posted on

Awesome Glass Card with Vanilla-tilt πŸš€

In this article, we will create a tap bar that you can use in your mobile projects. Let's first look at what are we building:

Preview

Let's code...

HTML

<div class="container">
  <div class="card card-1">
    <div class="preview">
      <h4>Hover</h4>
    </div>
    <div class="content">
      <div>
        <h2>01</h2>
        <h3>Card One</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis consequuntur, quam officiis dolorum est reiciendis </p>
        <a href="#">Read More</a>
      </div>
    </div>
  </div>
  <div class="card card-2">
    <div class="preview">
      <h4>Hover</h4>
    </div>
    <div class="content">
      <div>
        <h2>02</h2>
        <h3>Card Two</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis consequuntur, quam officiis dolorum est reiciendis </p>
        <a href="#">Read More</a>
      </div>
    </div>
  </div>
  <div class="card card-3">
    <div class="preview">
      <h4>Hover</h4>
    </div>
    <div class="content">
      <div>
        <h2>03</h2>
        <h3>Card Three</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis consequuntur, quam officiis dolorum est reiciendis </p>
        <a href="#">Read More</a>
      </div>
    </div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Now let's look at the CSS:

CSS

@import url('https://fonts.googleapis.com/css?family=Merriweather:700|Poppins');
* {
  font-family: Poppins;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #161623;
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#f00, #f0f);
  clip-path: circle(30% at right 70%);
}

body::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#2196f3, #e91e63);
  clip-path: circle(20% at 10% 10%);
}

.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  flex-wrap: wrap;
  z-index: 1;
}

.container .card {
  position: relative;
  width: 280px;
  height: 450px;
  margin: 30px;
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  cursor: pointer;
}

.container .card-1 .content {
  padding: 20px;
  text-align: center;
  transform: translateY(100px);
  opacity: 0;
  transition: 0.5s;
}

.container .card-2 .content {
  padding: 20px;
  text-align: center;
  opacity: 0;
  transition: 0.5s;
}

.container .card-3 .content {
  padding: 20px;
  text-align: center;
  transform: translateY(-100px);
  opacity: 0;
  transition: 0.5s;
}

.container .card .preview {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: all .6s;
}

.preview h4 {
  color: #fff;
  font-size: 22px;
}

.card-1 .preview h4::first-letter {
  color: red;
  font-size: 32px;
}

.card-2 .preview h4::first-letter {
  color: green;
  font-size: 32px;
}

.card-3 .preview h4::first-letter {
  color: blue;
  font-size: 32px;
}

.container .card-1:hover .preview {
  transform: translateY(-100%);
  opacity: 0;
}

.container .card-2:hover .preview {
  opacity: 0;
}

.container .card-3:hover .preview {
  transform: translateY(100%);
  opacity: 0;
}

.container .card:hover .content {
  transform: translateY(0px);
  opacity: 1;
}

.container .card .content h2 {
  position: absolute;
  top: -80px;
  right: 30px;
  font-size: 6em;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.container .card .content h3 {
  font-size: 1.8em;
  color: #fff;
  z-index: 1;
  letter-spacing: 2px;
}

.container .card .content p {
  font-size: 1em;
  color: #fff;
  font-weight: 300;
}

.container .card .content a {
  position: relative;
  display: inline-block;
  padding: 8px 20px;
  margin-top: 20px;
  text-decoration: none;
  background: #fff;
  color: #000;
  border-radius: 20px;
  transition: transform .2s;
  font-weight: 600;
  letter-spacing: 1.1px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.container .card .content a:hover {
  transform: scale(1.1);
  color: red;
}

Enter fullscreen mode Exit fullscreen mode

Let's add some magic in javascript,
Add this script at in your head tag vanilla-tilt.

JAVASCRIPT

VanillaTilt.init(document.querySelectorAll(".card"), {
  max: 25,
  speed: 400,
  glare: true,
  "max-glare": 0.5
});
Enter fullscreen mode Exit fullscreen mode

Have you done ??

Drop a like to my first blog πŸ’– :)

Top comments (6)

Collapse
 
adam_cyclones profile image
Adam Crockett πŸŒ€

I had this idea off combining this tilt effect with a slow proximity drift so that your mouse attracts the card.

Imagine a boat drifting near a jetty, it floats towards you, as your foot 🦢 applies pressure to the boat, the boat tilts then you find your balance.

I'm not going to make it but maybe you can?

Collapse
 
unreactive profile image
unreactive

Looks really cool. A codepen would have been nice though.

Collapse
 
femil profile image
Femil Savaliya • Edited
Collapse
 
naashnix profile image
Ravindu Thilakshana

Very interesting.

Collapse
 
femil profile image
Femil Savaliya

Thank you πŸ’.

Collapse
 
manthanco profile image
Manthan Thummar

Awesome