Change styling on hover in card material design CDN

Material design is a quick and easy way to build usable and beautiful design with mimimal effort.

Let's see how to do card styling with hover effect.

Step 1. insert libraries into header

<head>
    <meta charset="UTF-8">
    <title>wecode101 on hover effect</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/css/mdb.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>

The libararies in the header are used to:

Create the card styling

Align the card styling

Fontawsome icons

Step 2. Insert card layout

<main>

    <!--Main layout-->
    <div class="container">

      <!--Second row-->
      <div class="row">
        <!--First columnn-->
        <div class="col-md-4">
          <!--Card-->
          <div id="heart" class="card">

            <!--Card image-->
            <div class="text-center pt-4">
              <i class="fa fa-3x fa-heart"></i>
            </div>
            <!--/.Card image-->

            <!--Card content-->
            <div class="card-block p-4">
              <!--Title-->
              <h4 class="card-title">The Heart</h4>
              <!--Text-->
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
              <small>Johnny Lue</small>
            </div>
            <!--/.Card content-->

          </div>
          <!--/.Card-->
        </div>
        <!--First columnn-->

        <!--Second columnn-->
        <div class="col-md-4">
          <!--Card-->
          <div id="envelope" class="card">

            <!--Card image-->
            <div class="text-center pt-4">
                  <i class="fa fa-3x fa-envelope"></i>
            </div>
            <!--/.Card image-->

            <!--Card content-->
            <div class="card-block p-4">
              <!--Title-->
              <h4 class="card-title">The Envelope</h4>
              <!--Text-->
              <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum et dolore magna aliqua.</p>
              <small>Ben Burk</small>
            </div>
            <!--/.Card content-->

          </div>
          <!--/.Card-->
        </div>
        <!--Second columnn-->

        <!--Third columnn-->
        <div class="col-md-4">
          <!--Card-->
          <div id="rocket" class="card">

            <!--Card image-->
            <div class="text-center pt-4">
                <i class="fa fa-3x fa-rocket"></i>
            </div>
            <!--/.Card image-->

            <!--Card content-->
            <div class="card-block p-4">
              <!--Title-->
              <h4 class="card-title">The Rocket</h4>
              <!--Text-->
              <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
              <small>Alex Blane</small>
            </div>
            <!--/.Card content-->

          </div>
          <!--/.Card-->
        </div>
        <!--Third columnn-->
      </div>
      <!--/.Second row-->
    </div>
    <!--/.Main layout-->

  </main>

This is where the material design comes in, it creates the card styling and holds all the content within it.

Step 3. Insert styling for hover effect

<style>
    /* TEMPLATE STYLES */
    body{
     background: #f0f0f0;
    }
    
    .main {
      padding-top: 3rem;
      padding-bottom: 2rem;
    }
    
    .card {
      cursor: pointer;
      margin-top: 8rem;
    }
    
    .card:hover{color:#ffffff; background:green; margin-top:6rem}
  </style>

Using the CSS styling above, once you hover over a card you will see it jump and its colors change.

Here is the full styling:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wecode101 on hover effect</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/css/mdb.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
    /* TEMPLATE STYLES */
    body{
     background: #f0f0f0;
    }
    
    .main {
      padding-top: 3rem;
      padding-bottom: 2rem;
    }
    
    .card {
      cursor: pointer;
      margin-top: 8rem;
    }
    
    .card:hover{color:#ffffff; background:green; margin-top:6rem}
  </style>
</head>
<body>
  <main>

    <!--Main layout-->
    <div class="container">

      <!--Second row-->
      <div class="row">
        <!--First columnn-->
        <div class="col-md-4">
          <!--Card-->
          <div id="heart" class="card">

            <!--Card image-->
            <div class="text-center pt-4">
              <i class="fa fa-3x fa-heart"></i>
            </div>
            <!--/.Card image-->

            <!--Card content-->
            <div class="card-block p-4">
              <!--Title-->
              <h4 class="card-title">The Heart</h4>
              <!--Text-->
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
              <small>Johnny Lue</small>
            </div>
            <!--/.Card content-->

          </div>
          <!--/.Card-->
        </div>
        <!--First columnn-->

        <!--Second columnn-->
        <div class="col-md-4">
          <!--Card-->
          <div id="envelope" class="card">

            <!--Card image-->
            <div class="text-center pt-4">
                  <i class="fa fa-3x fa-envelope"></i>
            </div>
            <!--/.Card image-->

            <!--Card content-->
            <div class="card-block p-4">
              <!--Title-->
              <h4 class="card-title">The Envelope</h4>
              <!--Text-->
              <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum et dolore magna aliqua.</p>
              <small>Ben Burk</small>
            </div>
            <!--/.Card content-->

          </div>
          <!--/.Card-->
        </div>
        <!--Second columnn-->

        <!--Third columnn-->
        <div class="col-md-4">
          <!--Card-->
          <div id="rocket" class="card">

            <!--Card image-->
            <div class="text-center pt-4">
                <i class="fa fa-3x fa-rocket"></i>
            </div>
            <!--/.Card image-->

            <!--Card content-->
            <div class="card-block p-4">
              <!--Title-->
              <h4 class="card-title">The Rocket</h4>
              <!--Text-->
              <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
              <small>Alex Blane</small>
            </div>
            <!--/.Card content-->

          </div>
          <!--/.Card-->
        </div>
        <!--Third columnn-->
      </div>
      <!--/.Second row-->
    </div>
    <!--/.Main layout-->

  </main>
</body>
</html>

Here is the result below: