DocsAllOver Responsive CSS Only Services Section with Hover Effects Snippets

Responsive CSS Only Services Section with Hover Effects

Aug. 12, 2025

CSS, Responsive, Card, Clean UI, Features Section

Full Screen

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Responsive CSS Services Section with Hover Effects</title>
  <!-- Font Awesome CDN-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
  <!-- Google Font -->
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet" />
</head>

<body>
  <section>
    <h2 style="text-align: center; font-size: 3rem;">Our Services</h2>
    <div class="row">
      <div class="column">
        <div class="card">
          <div class="icon-wrapper">
            <i class="fa-solid fa-comment"></i>
          </div>
          <h3>Service I</h3>
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam
            consequatur necessitatibus eaque.
          </p>
        </div>
      </div>
      <div class="column">
        <div class="card">
          <div class="icon-wrapper">
            <i class="fa-solid fa-envelope"></i>
          </div>
          <h3>Service II</h3>
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam
            consequatur necessitatibus eaque.
          </p>
        </div>
      </div>
      <div class="column">
        <div class="card">
          <div class="icon-wrapper">
            <i class="fa-solid fa-suitcase"></i>
          </div>
          <h3>Service III</h3>
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam
            consequatur necessitatibus eaque.
          </p>
        </div>
      </div>
      <div class="column">
        <div class="card">
          <div class="icon-wrapper">
            <i class="fa-solid fa-truck-fast"></i>
          </div>
          <h3>Service IV</h3>
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam
            consequatur necessitatibus eaque.
          </p>
        </div>
      </div>
      <div class="column">
        <div class="card">
          <div class="icon-wrapper">
            <i class="fa-solid fa-globe"></i>
          </div>
          <h3>Service V</h3>
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam
            consequatur necessitatibus eaque.
          </p>
        </div>
      </div>
      <div class="column">
        <div class="card">
          <div class="icon-wrapper">
           <i class="fa-solid fa-calendar-days"></i>
          </div>
          <h3>Service VI</h3>
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam
            consequatur necessitatibus eaque.
          </p>
        </div>
      </div>
    </div>
  </section>
</body>

</html>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
section {
  height: 100vh;
  width: 100%;
  display: grid;
  place-items: center;
}
.row {
  display: flex;
  flex-wrap: wrap;
}
.column {
  width: 100%;
  padding: 0 1em 1em 1em;
  text-align: center;
}
.card {
  width: 100%;
  height: 100%;
  padding: 2em 1.5em;
  background: linear-gradient(#ffffff 50%, #0d6efd 50%);
  background-size: 100% 200%;
  background-position: 0 2.5%;
  border-radius: 5px;
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: 0.5s;
}
h3 {
  font-size: 20px;
  font-weight: 600;
  color: #1f194c;
  margin: 1em 0;
}
p {
  color: #575a7b;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.03em;
}
.icon-wrapper {
  background-color: #0d6efd;
  position: relative;
  margin: auto;
  font-size: 30px;
  height: 2.5em;
  width: 2.5em;
  color: #ffffff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: 0.5s;
}
.card:hover {
  background-position: 0 100%;
}
.card:hover .icon-wrapper {
  background-color: #ffffff;
  color: #0d6efd;
}
.card:hover h3 {
  color: #ffffff;
}
.card:hover p {
  color: #f0f0f0;
}
@media screen and (min-width: 768px) {
  section {
    padding: 0 2em;
  }
  .column {
    flex: 0 50%;
    max-width: 50%;
  }
}
@media screen and (min-width: 992px) {
  section {
    padding: 1em 3em;
  }
  .column {
    flex: 0 0 33.33%;
    max-width: 33.33%;
  }
}

//Doesn't require any JS.

This CSS snippet provides a modern and visually appealing component for showcasing your services or features. It's designed to present information clearly in a grid layout, featuring engaging hover effects and ensuring a compelling display across all devices without the need for JavaScript.

Key Features

Responsive Design: The services section adapts seamlessly to different screen sizes, providing optimal readability and presentation on desktops, tablets, and mobile devices using CSS media queries.
Clear Service Presentation: Each service block is structured to clearly articulate a specific service or offering, paired with a relevant icon from Font Awesome for enhanced understanding.
Engaging Hover Effects: The component uses a linear-gradient background with a background-position change on hover, creating a smooth transition that changes the card's background color and text color simultaneously.
CSS-Only Implementation: All layout, responsiveness, and interactive effects are achieved purely with CSS, making the snippet lightweight and fast-loading with no external dependencies.

Implementation

Create the HTML Structure: The basic HTML uses a <section> container with a heading, a .row div for the grid, and multiple .column divs, each containing a .card for a service. The cards contain a Font Awesome icon, a heading, and a paragraph.
Apply CSS for Layout: The CSS uses flexbox for the .row and sets flex properties on the .column for responsiveness. Media queries at 768px and 992px adjust the column width to create a two-column and then a three-column layout.
Style the Cards: The .card class uses a linear-gradient as its background, with background-size: 100% 200% and background-position: 0 2.5% to initially show the white portion. A transition property ensures a smooth change.
Implement Hover Effects: The .card:hover rule changes the background-position to 0 100%, which smoothly reveals the blue portion of the gradient. Other hover rules change the text and icon colors to white.