Morphing Profile Card Interaction

This Morphing Profile Card is a sleek UI component perfect for social platforms or team pages. Initially, it presents a large, immersive portrait. Upon interaction (hover or focus), the image smoothly transitions from a portrait ratio to a square, sliding up to reveal detailed profile information and action buttons hidden below. The animation is fluid and adds a layer of discovery to the interface.

Core Technique

The animation relies on transitioning the aspect-ratio property, a modern CSS feature.

1. Image Transition: The image starts with aspect-ratio: 2/3. On hover, it shifts to 1/1. Since the card has a fixed height, the browser recalculates the image height, creating space for the content below without using JavaScript height calculations.
2. Content Reveal: The text section is initially hidden using a combination of opacity: 0 and translate: 0 -200% (or similar offsets). When the parent is hovered, these properties transition back to their natural state, creating a “slide-in” effect that coordinates with the image resizing.
3. Backdrop Blur: A pseudo-element ::before with backdrop-filter: blur(1rem) creates a frosted glass effect at the bottom, hinting at content before the reveal.

Customization

The card uses CSS variables for theming, making it effortless to switch between light and dark modes or adapt to brand colors.

.card {
  /* Theme Variables */
  --bg: #fff;
  --text-color: #666;
  --button-color: #eee;
  
  /* Dimensions */
  width: 20rem;
  height: 30rem;
}

.card.dark {
  /* Dark Mode Overrides */
  --bg: #222;
  --text-color: #ccc;
}

To adjust the speed of the animation, modify the transition timing in the CSS selectors.

.card > img {
  /* Slower image resize */
  transition: aspect-ratio 0.5s, object-position 0.5s; 
}

Tips

1. Focus-Within: The CSS uses .card:hover, .card:focus-within. This is excellent for accessibility. It ensures the reveal animation triggers not just on mouse hover, but also when a keyboard user tabs into the “Follow” button inside the card.

2. Browser Support: This demo relies on aspect-ratio for the layout shift. While supported in all modern browsers (Chrome 88+, Safari 15+), older browsers will ignore it. Always test your layout degradation; typically, providing a fixed height fallback or padding-bottom hack is good practice if legacy support is strictly required.