Change styling on hover in card material design CDN

Change styling on hover in card material design CDN

Posted by Luke Beeno on June 5, 2022

Change styling on hover in card material design CDN

Change styling on hover in card material design CDN

Posted by Luke Beeno on June 5, 2022

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: