Hover Pepsi Logo

AI Overview: Hover Pepsi Logo

This project is an interactive digital product card designed to showcase a Pepsi beverage in a dynamic way. Its main purpose is to engage users through a "reveal" animation: initially, the card displays only a Pepsi logo within a glowing circle, but when a user hovers over it, the card expands to reveal a 3D-looking product image, descriptive text, and a "Shop Now" button.

The project is built using a clean HTML structure and sophisticated CSS transitions. The layout relies on absolute positioning to stack elements—like the logo, the can, and the text—on top of each other. By default, the product image and text are hidden or scaled down to zero, waiting for the hover state to trigger their appearance.

The animation logic is controlled entirely through CSS transition-delay and transform properties. When the mouse enters the card area, the card's width increases, and a sequence of animations begins: the logo shrinks, the background circle transforms into a rectangular backdrop, and the Pepsi can rotates into view. This staggered timing creates a professional, app-like feel without the need for JavaScript.

Key Code Snippets

1. Expanding the Card
This CSS rule handles the primary trigger, doubling the width of the card when the user hovers over it to make room for the product details.

.card:hover {
  width: 600px;
  transition-delay: 0.5s;
}

2. The Background Transformation
The background starts as a circular border and transforms into a solid blue rounded rectangle using the ::before pseudo-element.

.card:hover .circle::before {
  transition-delay: 0.5s;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background: var(--clr);
}

3. Product Image Animation
The Pepsi can is initially invisible and rotated; on hover, it scales up to full size and moves to the right side of the card with a slight tilt.

.card:hover .product_img {
  transition-delay: 0.75s;
  top: 25%;
  left: 75%;
  height: 530px;
  transform: translate(-50%, -50%) scale(1) rotate(15deg);
}

4. Content Visibility
The text description and button are hidden using opacity: 0 and visibility: hidden until the hover state makes them appear.

.card:hover .content {
  transition-delay: 0.75s;
  opacity: 1;
  visibility: visible;
  left: 20px;
}