Glassmorphism Card Hover Effect

31 Dec, 2020
Glassmorphism is a modern way of styling web-elements of any web-page and providing a 3D as well as a glass effect. This animation effect can be easily generated by using HTML, CSS, and Vanilla-tilt JS. We can implement Glassmorphism using various CSS properties. It is used to add a glass effect to the given element and Vanilla-tilt JS is used to provide a tilt effect to the card.
Installation:
Before moving further, firstly we have to install the vanilla-tilt module, by running the following command in your project directory, with the help of terminal in your SRC folder or you can also run this command in Visual Studio Code’s terminal in your project folder.npm install vanilla-tilt
npm install vanilla-tilt
Vanilla-tilt JS can also be used using its CDN.https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js
https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js
HTML code: In this section, we will make the layout of the card.
index.html
HTML
<!DOCTYPE html><html>  <body>    <div class="gfg">        <div class="card">            <div class="content">                <h2>GeeksforGeeks</h2>                <h3>Welcome</h3>                <p>                    Learn Data Structures Online At                     Your Own Pace With The Best Of                     Faculty In The Industry. The Best                     Data Structures Course Available                    Online From Skilled And Experienced                     Faculty.                </p>            </div>        </div>    </div></body>  </html>
CSS Code: In this section, we will use some CSS properties to design the Card.
index.css
HTML
<style>    *{        margin:0;        padding:0;        box-sizing:border-box;            }      body{        display:flex;        justify-content:center;        align-items:center;        min-height:100vh;        background:green;    }      .gfg{        position:relative;        display:flex;        justify-content:center;        align-items:center;        max-width:1000px;        flex-wrap:wrap;        z-index:1;    }           .gfg .card{        position:relative;        width:300px;        height:300px;        margin:60px;        box-shadow:20px 20px 50px rgb(0,0,0,0.4);        border-radius:15px;        background:rgba(255,255,255,0.1);        overflow:hidden;        display:flex;        justify-content:center;        align-items:center;        backdrop-filter:blur(6px);    }      .gfg .card .content{        padding:40px;        text-align:center;            }</style>
JavaScript Code: In this section, we will use Vanilla-tilt JS to provide a tilt effect to the card.
script.js
Javascript
<script>    VanillaTilt.init(document.querySelector(".card"), {        max: 40,        speed: 800,        glare:true,        "max-glare":2.5,    });</script>
Complete Code: In this section, we will combine the above three sections to create a Glassmorphism Effect.
HTML
<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <style>        *{            margin: 0;            padding: 0;            box-sizing: border-box;                    }          body{            display: flex;            justify-content: center;            align-items: center;            min-height: 100vh;            background: green;        }          .gfg{            position: relative;            display: flex;            justify-content: center;            align-items: center;            max-width: 1000px;            flex-wrap: wrap;            z-index: 1;        }                   .gfg .card{            position: relative;            width: 300px;            height: 300px;            margin: 60px;            box-shadow: 20px 20px 50px rgb(0,0,0,0.4);            border-radius: 15px;            background: rgba(255,255,255,0.1);            overflow: hidden;            display: flex;            justify-content: center;            align-items: center;            backdrop-filter: blur(6px);        }          .gfg .card .content{            padding: 40px;            text-align: center;        }    </style></head>  <body>    <div class="gfg">        <div class="card">            <div class ="content">                <h2>GeeksforGeeks</h2>                <h3>Welcome</h3>                <p>                    Learn Data Structures Online At Your                     Own Pace With The Best Of Faculty In                     The Industry. The Best Data Structures                     Course Available Online From Skilled                     And Experienced Faculty.                </p>            </div>        </div>    </div>    <script src="vanilla-tilt.js">    </script>          <script>        VanillaTilt.init(document.querySelector(".card"), {          max: 40,          speed: 800,          glare: true,          "max-glare": 2.5,        });    </script></body>    </html>
Output:
CSS-Misc
HTML-Misc
JavaScript-Misc
jQuery-Plugin
Technical Scripter 2020
CSS
HTML
JavaScript
JQuery
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.