This project showcases an interactive iPhone product card animation built using HTML and CSS. When the user hovers over the card, it smoothly expands to reveal product details and a call-to-action button. A circular frame transitions into a full rectangular panel, creating a premium product reveal effect. The Apple logo fades out while the iPhone image animates into focus. Overall, the project demonstrates modern hover-based UI animations commonly used in product landing pages.
HTML
<div class="card">
<img src="iphone.png" class="product_img" />
</div>The HTML defines a single product card that contains all visual and textual elements. The .card container acts as the interactive hover area that controls every animation. Inside it, a .circle wrapper holds the Apple logo, which is initially visible to attract attention. The iPhone image is placed separately so it can animate independently of the logo.
Product information such as the title, description, and button is grouped inside the .content section. This content stays hidden until the hover interaction is triggered. The structure is minimal and semantic, making it easy to maintain. No JavaScript is required because the interaction relies entirely on CSS hover states. Overall, the HTML provides a clean layout optimized for animation.
CSS
.card:hover {
width: 600px;
}The CSS is the core driver of this project’s animation and visual style. The card starts as a compact square and smoothly expands in width when hovered. A circular pseudo-element transforms into a full rectangular background, creating a dramatic reveal effect. The Apple logo scales down to zero, disappearing as the product image animates into view.
The iPhone image rotates and scales into position, giving a dynamic, premium feel. Text content fades in with a delay to maintain visual hierarchy. CSS variables are used to control colors, borders, and glow effects consistently. Shadows and gradients add depth and realism. Media-friendly transitions ensure smooth motion without performance issues. Overall, CSS handles layout, animation, and visual polish entirely on its own.
JavaScript
This project intentionally avoids JavaScript to keep interactions simple and efficient. All animations are triggered using CSS hover selectors and transition delays. The browser handles timing and rendering internally, ensuring smooth performance. Without JavaScript, the codebase remains lightweight and easy to debug. This approach is ideal for static product showcases and landing pages.
The absence of scripting also improves compatibility and reduces load time. Visual feedback is still rich and responsive despite no dynamic logic. This highlights how powerful modern CSS has become for UI animation. Overall, JavaScript is unnecessary for achieving this effect.
