900+ reviews For Entrepreneurs
Digittrix logo

Home - Scripts - Website Development

  • 16 July 2025

Responsive Card Design with Hover Effects
by Rattanjot S – 3 minute read – 254 views
PHP Web Design Laravel

Responsive cards help websites look good on all screens, keep users interested longer, and are popular in custom web development and website development services.

Key Points

  • Hover effects on cards extend how long users remain on a website by 65%
  • Responsive card designs reduce bounce rates by 40% in many web development projects.
  • 75% of clients prefer customised web designs featuring animated cards and hover effects.

Overview

Modern website development services need clean, engaging user interfaces that work smoothly across devices. Whether you run a web development company or provide custom web solutions, designing responsive cards with animated hover effects is an excellent way to showcase processes or services.

This guide shows you how to create a 3-step process section using HTML and CSS, including:

  • Auto-numbering with CSS counters
  • Icon animations
  • A mobile-friendly flex layout
  • Smooth hover transitions

HTML Layout Structure Overview

Below is the precise HTML markup used to create this responsive section:

                                        <div class="intro-box">
    <h3>Work Process</h3>
    <h1>3 Step Work Process</h1>
  </div>

  • A small heading (h3) styled in orange.
  • A large main heading (h1) styled in white.

Each step card contains

                                        <div class="step-card">
    <div class="step-content">
      <div class="step-number"></div>
      <div class="step-icon">
        <!-- Example SVG icon -->
        <img src="./images/process-icon-1-1-1.svg">
      </div>
      <div class="step-title">Design</div>
      <div class="step-desc">Construction services are well versed in local building codes and regulations ensuring that your project.</div>
    </div>
  </div>

Structure Hierarchy:

  • .step-card: The visual box.
  • .step-content: Inner wrapper for z-index control.
  • .step-number: Automatically numbered using CSS counters.
  • .step-icon: Contains the SVG or image icon.
  • .step-title and .step-desc: Main step text.

This clean, semantic HTML ensures maintainability—an essential standard in custom web development.

Styling Logic – In Detail

Below you will find each CSS block exactly as provided, along with clear explanations.

                                        .intro-box {
    background-color: #0d0d15;
    color: #fff;
    padding: 40px 30px;
    border-radius: 8px;
    max-width: 100%;
    margin: auto;
    text-align: center;
    margin-bottom: 40px;
}

Design Purpose:

  • Dark theme box to contrast with the light background
  • Rounded edges for a modern look
  • Centered text

This header style is common in professional website development services.

Process-section Flexbox Layout

                                        
    .process-section {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 20px;
      max-width: 1200px;
      margin: auto;
    }

Flex Properties:

  • display: flex: Enables horizontal layout
  • flex-wrap: wrap: Allows wrapping on small screens
  • gap: 20px: Spacing between cards
  • margin: auto: Centers the section

Such responsive layouts are a core aspect of custom web development.

Step-card Styling

                                        .step-card {
      background-color: #fff;
      border-radius: 8px;
      padding: 30px;
      position: relative;
      overflow: hidden;
      flex: 1 1 250px;
      min-width: 250px;
      transition: transform 0.3s ease;
      box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    }

Explanation:

  • position: relative: For pseudo-elements (::before)
  • overflow: hidden: Hides animated background slide
  • transition: Smooth transform on hover
  • flex: Responsive growth/shrink
  • box-shadow: Subtle depth effect

These features combine to produce elegant, modern components that any web development company would be proud to deliver.

Hover Animation – Orange Slide Background

                                        .step-card::before {
      content: '';
      position: absolute;
      bottom: -100%;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #ff8c00;
      transition: bottom 0.4s ease;
      z-index: 0;
     
    }


    .step-card:hover::before {
      bottom: 0;
     
     
    }

Behavior:

  • Starts hidden (bottom: -100%)
  • Slides up on hover (bottom: 0)
  • z-index: 0 keeps it behind text/icons

Hover effects like this make interfaces more interactive, an expectation in modern website development services.

Automatic Step Numbering (CSS Counter)

                                        
   body {
         counter-reset: section;
    }


 .step-number:before {
    position: absolute;
    counter-increment: section;
    content: " " counter(section) "";
    right: 19px;
    font-size: 90px;
    top: -30px;
    transition: transform 0.5s ease-in-out;
}
.step-card:hover .step-number:before{
    transform: rotate(360deg);
}

Explanation:

  • counter-reset: Initializes the counter
  • Each .step-number::before:

    • Increments the counter

    • Displays it as text

  • Spins on hover (rotate(360deg))

This creative touch elevates the user experience and distinguishes custom web development projects from templates.

Responsive Design

                                        @media (max-width: 768px) {
      .process-section {
        flex-direction: column;
      }
    }

Behavior:

  • Switches from horizontal to vertical layout
  • Maintains readability on all devices

Mobile responsiveness is essential for any serious web development company.

Final Words

This responsive card design with hover effects demonstrates how custom web development can deliver professional, dynamic, and user-friendly interfaces. By combining semantic HTML and modern CSS:

  • You achieve smooth animations without JavaScript.
  • The design remains fully responsive.
  • Auto-numbering ensures easy scalability.

Whether you’re offering website development services to enterprises or crafting personal projects, this approach helps you create modern, elegant layouts that impress users and clients alike.

Ready to build stunning web experiences? Partner with a skilled web development company to elevate your online presence with custom solutions like this.

Tech Stack & Version

Frontend

  • HTML5
  • CSS3
  • JavaScript

Backend

  • Node.js
  • PHP
  • Laravel

Deployment

  • DigitalOcean
  • AWS
  • Heroku

Recent Scripts

Website Development

Razorpay Payment Webhook: A Complete Guide

Author by Tarun C. – April 10, 2026 – 4 minute read

<p dir="ltr">Razorpay webhooks notify your server immediately of payment events, allowing secure, real-time updates and automatic transaction recording in your database.</p> <p>&nbsp;</p>

PHP
Website Development

Image Upload with Fixed Dimensions in ReactJS

Author by Parveen – April 6, 2026 – 4 minute read

<p>Over 70% of web apps use client-side image processing to ensure consistent UI, faster load times, and optimized performance with fixed dimensions in ReactJS.</p>

Website Development

Shopify Draft Orders: Convert Quotes into Paid Orders

Author by Bobin S. – April 2, 2026 – 3 minute read

<p>Convert quotes into paid orders using Shopify Draft Orders. Create custom pricing, send invoices, automate workflows, and boost order conversion rates.</p>