Card hover effect using HTML and CSS

by

In this article, I have provided you with a CSS card hover effect with a gradient background pink color. You can easily use it on your portfolio website or any other website. Recently, I have posted 11 examples of Product Card CSS, but today we will see the example of card hover effect css. I have already posted a collection of different types of cards that are designed using HTML, CSS and JavaScript.

Categories Of  CSS Cards:

How to Create a Hover Card in CSS?

How to Create a Hover Card in CSS

Author

Sebi

Source Code

Demo/Source Code

Language

HTML & CSS

Responsive

Yes

Html Structure:

<div class="container">  
     <div class="card">  
      <div class="face face1">  
       <div class="content">  
        <span class="stars"></span>  
        <h2 class="java">Java</h2>  
        <p class="java">Java is a class-based, object-oriented programming language that is designed to have as few implementation dependencies as possible.</p>  
       </div>  
      </div>  
      <div class="face face2">  
       <h2>01</h2>  
      </div>  
     </div>  
     <div class="card">  
      <div class="face face1">  
       <div class="content">  
        <span class="stars"></span>  
        <h2 class="python">Python</h2>  
        <p class="python">Python is an interpreted, high-level and general-purpose programming language.</p>  
       </div>  
      </div>  
      <div class="face face2">  
       <h2>02</h2>  
      </div>  
     </div>  
     <div class="card">  
      <div class="face face1">  
       <div class="content">  
        <span class="stars"></span>  
        <h2 class="cSharp">C#</h2>  
        <p class="cSharp">C# is a general-purpose, multi-paradigm programming language encompassing static typing, strong typing, lexically scoped and component-oriented programming disciplines.</p>  
       </div>  
      </div>  
      <div class="face face2">  
       <h2>03</h2>  
      </div>  
     </div>  
    </div>
HTML

CSS Style

@import url("https://fonts.googleapis.com/css2?family=Righteous&display=swap");  
  body {  
       margin: 0;  
       padding: 0;  
       display: flex;  
       justify-content: center;  
       align-items: center;  
       font-family: "Righteous", cursive;  
       min-height: 100vh;  
       background-color: #a9c9ff;  
       background-image: linear-gradient(180deg, #a9c9ff 0%, #ffbbec 100%);  
 }  
  body .container {  
       max-width: 100vw;  
       display: grid;  
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));  
       grid-gap: 35px;  
       margin: 0 auto;  
       padding: 40px 0;  
 }  
  body .container .card {  
       position: relative;  
       width: 300px;  
       height: 400px;  
       margin: 0 auto;  
       background: #000;  
       border-radius: 15px;  
       box-shadow: 0 15px 60px rgba(0, 0, 0, 0.5);  
 }  
  body .container .card .face {  
       position: absolute;  
       bottom: 0;  
       left: 0;  
       width: 100%;  
       height: 100%;  
       display: flex;  
       justify-content: center;  
       align-items: center;  
 }  
  body .container .card .face.face1 {  
       box-sizing: border-box;  
       padding: 20px;  
 }  
  body .container .card .face.face1 h2 {  
       margin: 0;  
       padding: 0;  
 }  
  body .container .card .face.face1 .java {  
       background-color: #fffc00;  
       -webkit-background-clip: text;  
       -webkit-text-fill-color: transparent;  
 }  
  body .container .card .face.face1 .python {  
       background-color: #00fffc;  
       -webkit-background-clip: text;  
       -webkit-text-fill-color: transparent;  
 }  
  body .container .card .face.face1 .cSharp {  
       background-color: #fc00ff;  
       -webkit-background-clip: text;  
       -webkit-text-fill-color: transparent;  
 }  
  body .container .card .face.face2 {  
       transition: 0.5s;  
 }  
  body .container .card .face.face2 h2 {  
       margin: 0;  
       padding: 0;  
       font-size: 10em;  
       color: #fff;  
       transition: 0.5s;  
       text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);  
       z-index: 10;  
 }  
  body .container .card:hover .face.face2 {  
       height: 60px;  
 }  
  body .container .card:hover .face.face2 h2 {  
       font-size: 2em;  
 }  
  body .container .card:nth-child(1) .face.face2 {  
       background-image: linear-gradient(40deg, #fffc00 0%, #fc00ff 45%, #00fffc 100%);  
       border-radius: 15px;  
 }  
  body .container .card:nth-child(2) .face.face2 {  
       background-image: linear-gradient(40deg, #fc00ff 0%, #00fffc 45%, #fffc00 100%);  
       border-radius: 15px;  
 }  
  body .container .card:nth-child(3) .face.face2 {  
       background-image: linear-gradient(40deg, #00fffc 0%, #fc00ff 45%, #fffc00 100%);  
       border-radius: 15px;  
 }
CSS

3 thoughts on “Card hover effect using HTML and CSS”

Leave a Comment