.card {
  position: relative;
  width: 200px;
  height: 200px;
  background: lightgrey;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  transition: all 1s ease-in-out;
}

.background {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 107%, #ff89cc 0%, #9cb8ec 30%, #00ffee 60%, #62c2fe 100%);
}

.logo {
  position: absolute;
  right: 50%;
  bottom: 50%;
  transform: translate(50%, 50%);
  transition: all 0.6s ease-in-out;
}

.logo .logo-svg {
  fill: white;
  width: 30px;
  height: 30px;
}

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
}

.icon .svg {
  fill: rgba(255, 255, 255, 0.797);
  width: 100%;
  transition: all 0.5s ease-in-out;
}

.box {
  position: absolute;
  padding: 10px;
  text-align: right;
  background: rgba(255, 255, 255, 0.389);
  border-top: 2px solid rgb(255, 255, 255);
  border-right: 1px solid white;
  border-radius: 10% 13% 42% 0%/10% 12% 75% 0%;
  box-shadow: rgba(100, 100, 111, 0.364) -7px 7px 29px 0px;
  transform-origin: bottom left;
  transition: all 1s ease-in-out;
}

.box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.box:hover .svg {
  fill: white;
}

.box1 {
  width: 70%;
  height: 70%;
  bottom: -70%;
  left: -70%;
}

.box1::before {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #ff53d4 60%, #62c2fe 90%);
}

.box1:hover::before {
  opacity: 1;
}

.box1:hover .icon .svg {
  filter: drop-shadow(0 0 5px white);
}

.box2 {
  width: 50%;
  height: 50%;
  bottom: -50%;
  left: -50%;
  transition-delay: 0.2s;
}

.box2::before {
  background: radial-gradient(circle at 30% 107%, #91e9ff 0%, #00ACEE 90%);
}

.box2:hover::before {
  opacity: 1;
}

.box2:hover .icon .svg {
  filter: drop-shadow(0 0 5px white);
}

.box3 {
  width: 30%;
  height: 30%;
  bottom: -30%;
  left: -30%;
  transition-delay: 0.4s;
}

.box3::before {
  background: radial-gradient(circle at 30% 107%, #969fff 0%, #b349ff 90%);
}

.box3:hover::before {
  opacity: 1;
}

.box3:hover .icon .svg {
  filter: drop-shadow(0 0 5px white);
}

.box4 {
  width: 10%;
  height: 10%;
  bottom: -10%;
  left: -10%;
  transition-delay: 0.6s;
}

.card:hover {
  transform: scale(1.1);
}

.card:hover .box {
  bottom: -1px;
  left: -1px;
}

.card:hover .logo {
  transform: translate(0, 0);
  bottom: 20px;
  right: 20px;
}

Live Preview

Ready Ln 1, Col 1

UTF-8 HTML/JS

Hover Card Animation UI Design with Icons Using HTML & CSS

In this post, we’re exploring a visually dynamic and interactive UI design — a hover card animation built entirely with HTML and CSS. This animation transforms a simple card into a visually layered interface with floating icon boxes, glowing gradients, and smooth transitions, making it a great learning project for aspiring front-end developers.

How the Hover Card Design Works

This card animation is centered around a square container that reacts when the user hovers over it. At rest, the card appears minimal — a rounded, soft-shadowed box with a central logo. But on hover, several icon layers slide in from the background, giving a sense of depth, motion, and interactivity.

The effect is achieved using CSS transitions, absolute positioning, and transform-origin logic to make elements animate into view in a natural and visually pleasing way.

Main Components of the Animation

1. The Card Container

The .card acts as the main wrapper. It’s styled with a light background, rounded corners, and a subtle box-shadow for depth. The entire card scales up slightly on hover using the transform: scale() property, giving it a responsive, animated feel.

2. Background Gradient

A decorative .background layer fills the card with a radial gradient composed of vibrant colors, helping the icons and logo stand out. This gradient gives the interface a soft, modern aesthetic.

3. Central Logo

The .logo SVG is centered using translate(50%, 50%) positioning. When the card is hovered over, the logo slides diagonally into the top-right corner. This shift helps create space for the animated icon boxes and adds movement to the design.

Animated Boxes and Icons

Each .box element holds a unique icon and enters the screen from different angles when the card is hovered over. These boxes use:

Absolute positioning (with negative bottom and left values) to start off-screen
Transition delays to stagger their appearance
Custom radial gradient backgrounds revealed on hover
SVG icons with drop-shadow effects that glow when hovered

The animation sequence gives the impression that the icons are “rising up” into position from outside the card, and it’s all done using simple timing techniques and layered transitions.

Box Variations

Box 1: The largest, appears first, showcasing a camera or photo-related icon
Box 2: Medium-sized, arrives shortly after, typically with a social media icon
Box 3: Smaller, with a messaging or community icon
Box 4: Smallest and most delayed, left empty for customization

Each box features its own background gradient and hover glow effect, reinforcing the animated and interactive style.

Key CSS Techniques Used

This design is a great example of how much you can achieve with just HTML and CSS. Some of the key techniques include:

position: absolute and transform for animation control
transition and transition-delay for staggered timing
box-shadow and filter: drop-shadow() for subtle glow effects
radial-gradient() for creating soft and colorful backgrounds
hover states to trigger movement and style changes
transform-origin: bottom left to control rotation entry points

No JavaScript is needed — just clean CSS transitions and layout logic.

Why This is Great for Learning

If you’re learning front-end development, this project offers valuable practice with:

Responsive layout design
Interactive hover effects
SVG icon integration
Layering and animation sequencing
Real-world UI/UX animation principles

It also encourages experimentation — you can easily change icon sets, background gradients, transition speeds, or scale values to create different visual styles or themes.

Final Thoughts

This hover card animation is a great exercise for anyone looking to explore modern UI effects using only HTML and CSS. It’s smooth, stylish, and perfect for use in profile cards, portfolios, dashboards, or even landing pages.

This code uses HTML and CSS only — no JavaScript included.

MIT License

Permission is freely granted to anyone who obtains a copy of this software and its accompanying documentation files (referred to as “the Software”), allowing them to use, copy, modify, merge, publish, distribute, sublicense, and even sell copies of the Software. Additionally, users are allowed to permit others to use the Software under these same terms.

It is required that the above copyright notices and this permission notice be included in all versions or significant portions of the Software.

Please note, the Software is provided “as is”, without any form of warranty—express or implied. This includes, but is not limited to, warranties of merchantability, fitness for a specific purpose, or non-infringement. Under no circumstances shall the original authors or rights holders be held responsible for any claims, damages, or other liabilities that may arise from the use of the Software, whether through legal action, negligence, or otherwise.

All code on Freeofcosts.com is reviewed before publishing. Each post includes a live code editor with real-time preview, so you can experiment and learn by doing. Most code is open-source and free to use or modify under respective licenses.