INFORMATION & CODE

Onhover Image Accordion Display

What the Code Does

The code creates an interactive hover-based image accordion/slider. It displays five narrow image panels representing Photography, Pottery, Painting, Collages, and Etchings. When the user moves the mouse over one of the panels, that image expands while the other images become narrower, creating an accordion-style effect. When the mouse leaves the expanded image, all panels return to their original size.

How the Code Works

The HTML provides the basic structure. The .outer-wrapper contains the title and the main .wrapper, which holds five .img-wrapper elements. Each image has a unique id from 0 to 4 and an onmouseover event that calls openImage(this.id). The text inside each .rotator identifies the subject of the corresponding image.

The CSS controls the appearance and layout. Each .img-wrapper is initially 64px wide and 320px high, with its own background image supplied through background-image. background-size: cover makes each image fill its panel, while transform: skew(-15deg) gives the panels their angled appearance. The .rotator elements display the labels vertically by rotating them -90deg. The transition-duration: 1s property makes the size and position changes animate smoothly.

The JavaScript provides the interactivity. It first selects all the image panels and their labels using querySelectorAll() .The openImage() function receives the ID of the panel currently being hovered over. It loops through all five panels and changes their widths: the hovered panel expands to 192px, while the other panels shrink to 32px. At the same time, the selected label moves into position, becomes horizontal, and expands across the image.

When the mouse leaves the expanded image, the mouseout event resets every panel to its original 64px width. The labels are also returned to their original position, width, and -90deg rotation. This produces the effect of an image expanding while hovered and the entire accordion returning to its normal state when the mouse moves away.

How to Use the Code

To use the code, place the HTML in your webpage, save the CSS as styles.css, and save the JavaScript as scripts.js in the appropriate locations. The image URLs in the CSS determine which photographs are displayed, so you can replace those URLs with your own images. You can also change the labels in the HTML to match your chosen images. When the page loads, simply move your mouse over any image panel to expand it.