INFORMATION & CODE

Animated Hero Image Display

What the Code Does

The code creates an animated hero/profile card for a photographer. The HTML provides the structure: a heading, an image, the photographer’s name and profession, a short description, and a “Go To Website” button. The JavaScript section is empty, so all of the animation and visual behaviour currently comes from CSS.

How the Code Works

The main .card_wrapper acts as the container for the entire profile card. Inside it, the .column elements divide the card into two sections: the left side contains the photograph, while the right side contains the photographer’s information. The <img> element supplies the photograph, and the alt attribute provides alternative text for accessibility

The CSS creates the visual appearance and animation. The .image_wrapper initially displays the photograph as a rotated square/diamond, while .lense clips the image into a circular shape. The image itself is enlarged and counter-rotated so that it appears correctly positioned inside the rotating container. The @keyframes rules named pad, cont, glass, and photo gradually change the size, padding, and rotation over a 7-second repeating animation. Around 52% of the animation, the photograph expands and changes from a rotated diamond into a larger, upright image.

The text elements are positioned over the right-hand side of the card using position: absolute. The button is also positioned at the bottom of the card. Its :hover state changes the button to orange when the mouse is over it, while its :active state changes it to green while it is being clicked.

How to Use the Code

To use the component, place the HTML in your webpage and put the CSS in the referenced styles.css file. Replace the image URL in the <img src=""> attribute with your own image, then change “Jenny Asquith,” “Photographer,” and the paragraph to your desired content. You should also replace the empty href="" in the <a> element with the website URL you want the button to open.

The browser automatically runs the CSS animations defined by the @keyframes rules. JavaScript would only be necessary if you wanted to add interactive behaviour such as pausing the animation, changing the image dynamically, opening a custom modal, or controlling the card with buttons.