How to Create Responsive Animated Hover Icon Cards

Do you want to add some visual flair to your website and make it more interactive? Animated hover icon cards are a great way to highlight key information, services, or features. This tutorial will guide you through creating these engaging elements using HTML and CSS. No Javascript required!

What We’re Building

We’ll be creating a section of responsive cards. When you hover over each card, it will:

Lighten its background.
“Lift” slightly with a subtle shadow.
The accent line next to the title will grow.
Show an icon related to the content.
Add dark transparent background to the content
Change the color of content text to white

This creates a polished and interactive user experience.

Prerequisites

Basic knowledge of HTML and CSS.
A text editor (like VS Code, Sublime Text, Notepad++, etc.).
A web browser (Chrome, Firefox, Safari, etc.).
Images for Icon.

Step 1: Setting up the HTML

First, let’s create the basic HTML structure. This includes the section container and the individual card elements.

<!-- Start Departments -->
<section class="departments section">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="section-title text-center">
          <h2>Our Specialities</h2>
          <img src="https://getcustomcms.com/demo/apollo/img/section-img.png" alt="#">
        </div>
        <br>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="why-choose-cards">
          <!-- Card #1 -->
          <div class="card Oncology">
            <div class="card-content">
              <h3 class="card-title">
                <span class="accent-line"></span>Oncology
              </h3>
              <p>Cancer Care</p>
            </div>
          </div>
          <!-- Card #2 -->
          <div class="card Cardiology">
            <div class="card-content">
              <h3 class="card-title">
                <span class="accent-line"></span>Cardiology
              </h3>
              <p>Heart Care</p>
            </div>
          </div>
          <!-- Card #3 -->
          <div class="card Spine">
            <div class="card-content">
              <h3 class="card-title">
                <span class="accent-line"></span>Spine Surgery
              </h3>
              <p>Spine Health</p>
            </div>
          </div>
          <div class="card Orthopedic">
            <div class="card-content">
              <h3 class="card-title">
                <span class="accent-line"></span>Orthopedic
              </h3>
              <p>Bone and Joint</p>
            </div>
          </div>
          <div class="card Organ">
            <div class="card-content">
              <h3 class="card-title">
                <span class="accent-line"></span>Organ Transplants
              </h3>
              <p>Transplant Services</p>
            </div>
          </div>
          <div class="card Gastroenterology">
            <div class="card-content">
              <h3 class="card-title">
                <span class="accent-line"></span>Gastroenterology
              </h3>
              <p>Digestive Health</p>
            </div>
          </div>
          <div class="card Gynecology">
            <div class="card-content">
              <h3 class="card-title">
                <span class="accent-line"></span>Gynecology
              </h3>
              <p>Gynecology</p>
            </div>
          </div>
          <div class="card Hematology">
            <div class="card-content">
              <h3 class="card-title">
                <span class="accent-line"></span>Hematology
              </h3>
              <p>Blood and Blood Disorders</p>
            </div>
          </div>

        </div>
      </div>
    </div>
  </section>
  <!-- End Departments -->

<section class=”departments section”>: This is the main container for our cards. The section class is a common semantic HTML tag. We will add basic padding to section class from css.
<div class=”why-choose-cards”>: This div will hold all our individual cards. The why-choose-cards class will be used for the layout.
<div class=”card Oncology”>: This is a single card. Notice the card class which will apply basic styling and hover effects. Added specific class for icon image on card.
<div class=”card-content”>: This holds the card’s title and description.
<h3 class=”card-title”> and <p>: These are the title and description elements.
<span class=”accent-line”>: This creates the small colored line next to the title.
Important: Repeat the card structure for each icon card you want to display, changing the text content accordingly.

Step 2: Styling with CSS

Now, let’s add the CSS to style our cards and create the hover animations. Put below css into your style.css or style tag.

/* 3) Card Container Layout */
.why-choose-cards {
  display: flex;
  flex-wrap: wrap; /* allows the cards to wrap on smaller screens */
  gap: 1.5rem;
  justify-content: center; /* center the cards in the container */
}
/* 4) Individual Cards */
/* Card styles (same as before, with a little extra at the end) */
.card {
  background-color: #f9f9f9;
  flex: 1 1 260px;
  max-width: 320px;
  padding: 1.5rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease; /* smooth transition for hover effects */
}
/* New hover state */
.card:hover {
  background-color: #fff; /* lighten background on hover */
  transform: translateY(-5px); /* subtle “lift” effect */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* a more pronounced shadow */
}
/* 5) Card Number Style */
.card-number {
  font-size: 2.5rem;
  font-weight: bold;
  color: #0e1c3f;
  margin-bottom: 1.5rem;
}
/* 6) Card Text Content */
.card-content {
  /* The h3 and paragraph go here. */
}
.card-title {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  color: #0e1c3f;
  margin-bottom: 0.75rem;
}
.card-title .accent-line {
  display: inline-block;
  width: 3px;
  height: 1.2em; /* match the approximate line-height of the text */
  background-color: #1D77D1; /* gold accent */
  margin-right: 0.5rem;
}
/* The accent line’s default state */
.accent-line {
  display: inline-block;
  width: 3px;
  height: 1.2em;
  background-color: #d1b575; /* your gold color */
  margin-right: 0.5rem;
  /* Enable smooth animation of the transform */
  transition: transform 0.3s ease;
  /* Ensure the line expands from the bottom or center; adjust as you prefer */
  transform-origin: bottom;
}
/* On card hover, scale the accent-line vertically */
.card:hover .accent-line {
  transform: scaleY(
    1.5
    ); /* grows 50% taller; try 2.0 or more for a bigger effect */
  }
  .card p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.4;
  }
  /* Responsive tweaks (optional) */
  @media (max-width: 768px) {
    .card {
      max-width: 100%;
    }
  }
  .section {
    padding: 50px 0;
  }
  .Oncology:hover {
    background-image: url(https://getcustomcms.com/demo/apollo/upload/icons/Oncology.png);
    background-repeat: no-repeat;
    background-position: right -27px;
  }
  .Cardiology:hover {
    background-image: url(https://getcustomcms.com/demo/apollo/upload/icons/Cardiology.png);
    background-repeat: no-repeat;
    background-position: right -27px;
  }
  .Spine:hover {
    background-image: url(https://getcustomcms.com/demo/apollo/upload/icons/Spine.png);
    background-repeat: no-repeat;
    background-position: right -27px;
  }
  .Orthopedic:hover {
    background-image: url(https://getcustomcms.com/demo/apollo/upload/icons/Orthopedic.png);
    background-repeat: no-repeat;
    background-position: right -27px;
  }
  .Organ:hover {
    background-image: url(https://getcustomcms.com/demo/apollo/upload/icons/Organ.png);
    background-repeat: no-repeat;
    background-position: right -27px;
  }
  .Gastroenterology:hover {
    background-image: url(https://getcustomcms.com/demo/apollo/upload/icons/Gastroenterology.png);
    background-repeat: no-repeat;
    background-position: right -27px;
  }
  .Gynecology:hover {
    background-image: url(https://getcustomcms.com/demo/apollo/upload/icons/Gynecology.png);
    background-repeat: no-repeat;
    background-position: right -27px;
  }
  .Hematology:hover {
    background-image: url(https://getcustomcms.com/demo/apollo/upload/icons/Hematology.png);
    background-repeat: no-repeat;
    background-position: right -27px;
  }
  .Oncology,
  .Cardiology,
  .Spine,
  .Orthopedic,
  .Organ,
  .Gastroenterology,
  .Gynecology,
  .Hematology{
    position:relative
  }
  .Oncology:hover .card-content::after,
  .Cardiology:hover .card-content::after,
  .Spine:hover .card-content::after,
  .Orthopedic:hover .card-content::after,
  .Organ:hover .card-content::after,
  .Gastroenterology:hover .card-content::after,
  .Gynecology:hover .card-content::after,
  .Hematology:hover .card-content::after{
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    background-color: #0000007a;
  }
  .Oncology:hover h3, .Oncology:hover p,
  .Cardiology:hover h3, .Cardiology:hover p,
  .Spine:hover h3, .Spine:hover p,
  .Orthopedic:hover h3, .Orthopedic:hover p,
  .Organ:hover h3, .Organ:hover p,
  .Gastroenterology:hover h3, .Gastroenterology:hover p,
  .Gynecology:hover h3, .Gynecology:hover p,
  .Hematology:hover h3, .Hematology:hover p {
    color: #ffffff !important;
    position: relative;
    z-index: 1;
  }

Key CSS Properties Explained:

.why-choose-cards { display: flex; flex-wrap: wrap; … }: This uses Flexbox to create a responsive layout. flex-wrap: wrap ensures that cards wrap to the next line on smaller screens.
.card { … transition: all 0.3s ease; }: The transition property creates the smooth animation effect on hover.
.card:hover { … }: This defines the styles that are applied when you hover over a card. transform: translateY(-5px) creates the “lift” effect.
.accent-line { … transition: transform 0.3s ease; transform-origin: bottom; }: This styles the accent line and adds a transition for the hover effect. transform-origin: bottom ensures the line expands from the bottom.
@media (max-width: 768px) { .card { max-width: 100%; } }: This is a media query that makes the cards take up the full width of the container on screens smaller than 768px (typical for mobile devices).
.Oncology:hover { background-image: url(…); … }: This adds the specific icon image as a background to the card on hover. You will need to replace the URLs with the actual paths to your icon images.
.Oncology:hover .card-content::after { … }: This adds a dark overlay to the content on hover.
.Oncology:hover h3, .Oncology:hover p { … }: This changes the text color to white on hover.

Step 3: Adding the Hover Icons

Each card’s hover state now displays a unique icon. The CSS targets specific classes (e.g., .Oncology:hover) and uses the background-image property to display the icon. Ensure you replace the placeholder URLs with the actual paths to your icon images.

Step 4: Making it Responsive

The CSS includes a media query to make the cards responsive. On smaller screens, the cards will stack vertically, ensuring a good user experience on mobile devices.

Customization

Colors: Change the background colors, text colors, and accent line color to match your website’s branding.
Icons: Use your own icons to represent the content of each card.
Animations: Experiment with different transition effects and transform properties to create unique hover animations. You can adjust the duration and easing of the transitions.
Content: Modify the text content of each card to fit your specific needs.
Number of Cards: Easily add or remove cards by duplicating or deleting the HTML code for each card.

Demo / Embed

See the Pen Untitled by Pawan Mall (@iPawan) on CodePen.

Conclusion

Congratulations! You’ve successfully created responsive animated hover icon cards using HTML and CSS. This technique can be used to enhance the visual appeal and interactivity of your website, making it more engaging for your visitors. Remember to customize the styles and content to match your specific requirements.

155

Build Your Own: Responsive Animated Hover Icon Cards with HTML & CSS

Table of Contents