Rotating Glass Cards with Hover Animation Using HTML and CSS

This layout features a beautiful glass-style card design that includes animated rotation and blur effects when hovered. It creates an engaging 3D-style look using pure HTML and CSS, perfect for showcasing icons, links, or feature highlights on modern websites.

Visual Overview

The design includes a row of three rectangular cards. Each card displays an icon in the center and a label at the bottom. The labels read “Github”, “Code”, and “Earn”. On initial load, each card is rotated slightly in different directions, giving the layout a playful, dynamic appearance.

As soon as you move your cursor over the group, all the cards smoothly rotate into a straight, aligned position. At the same time, their spacing adjusts, creating a sense of movement and interaction. This fluid effect helps attract the user’s attention while still keeping the design clean and readable.

Layout and Structure

All three cards are wrapped inside a main container that centers the content. The cards themselves have a frosted-glass look, achieved with transparency, blur, and soft shadows. They’re built to be flexible and responsive while maintaining the same shape and size across the layout.

Each card holds an SVG icon centered within it. Below the icon, a label appears in a semi-transparent area, which is built to always stay anchored to the bottom of the card. The label text comes from a data attribute, keeping the HTML clean and flexible for future edits.

Interactive Hover Effect

The animation begins with each card slightly rotated at different angles. These angles are controlled by a custom CSS variable. When the user hovers over the group of cards, all cards:

• Rotate back to a flat, centered position

• Shift spacing to expand evenly across the row

This makes the layout feel alive and responsive, without any complex scripting. The transition is smooth and visually appealing, giving a floating-glass effect that works well on modern dark or blurred backgrounds.

Glass Effect Styling

The frosted-glass appearance is created by combining multiple CSS features:

• A semi-transparent background using gradients

• A light border and soft drop shadow

• A backdrop-filter that applies a blur to the background behind the card

Together, these styles create a realistic glassmorphism effect, which is a popular trend in modern UI design. The icons inside the cards are white and sized large enough to be the focal point, keeping the overall layout clean and focused.

Ideal Use Cases

This card layout is perfect for highlighting features or categories, linking to external platforms, or adding interactive content blocks. It works well on landing pages, portfolio sites, or dashboards where you want minimal but elegant animation.

The design is easy to customize. You can change the icon, text, rotation angles, spacing, and even the number of cards — all by modifying a few lines in the HTML and CSS. It’s lightweight, fast-loading, and doesn’t require JavaScript to work.

This rotating glass card layout combines visual impact with performance. Its clean structure and hover animation give any webpage a premium, interactive feel using only HTML and CSS.