INFORMATION & CODE

Antique Image Effect

What the Code Does

This code creates a static “Antique Image Effect” display using HTML and CSS. The HTML provides the structure: a main container holds the title and description, followed by the styled antique image and a smaller version labelled “Original image.” The external styles.css file contains all of the visual styling, there is no JavaScript functionality required for the effect to work.

How the Code Works

The main .wrap-body acts as the black-framed display area. Inside it, .shadow-wrap provides the position and drop shadow for the main photograph, while .image-wrap displays the photograph itself. The image is loaded through background-image from the specified URL and background-size: cover makes it fill the available area. The filter: grayscale(100%) property removes the colour, giving the photograph a black-and-white appearance.

The ragged, irregular edges are created with clip-path: polygon(...). The long list of percentage coordinates defines the shape of the image, effectively cutting away small sections around its edges to make it look like an old, torn photograph. The same clipping shape is applied to .overlay, ensuring that the orange-tinted layer follows the same irregular outline.

The .overlay is positioned directly over the image using position: absolute. Its semi-transparent orange background and multiple inset shadows create the warm, aged or sepia-like appearance. Because the overlay uses transparency, the grayscale photograph underneath remains visible while gaining the antique colour effect. The z-index: -1 on .image-wrap also helps establish the intended layering with the surrounding elements.

The .shadow-wrap adds depth around the photograph using filter: drop-shadow(...), while the image itself has additional box-shadow effects. Together, these shadows make the photograph appear raised from the black background rather than simply being another flat element on the page.

The .original-image displays the same photograph separately without the antique treatment. This gives the viewer a simple comparison between the original colour image and the modified antique-style image above it. Both images use the same background-image URL, but only .image-wrap receives the grayscale filter and the overlay effect.

The media queries make the layout more suitable for smaller screens and shorter browser windows. When the viewport is narrower than 680px, the descriptive text and original image are reduced in size and the main image is repositioned. Similarly, when the screen height is below 750px, several elements are moved lower so that the composition fits better within the available space.

How to Use the Code

To use the code, save the HTML as something such as index.html and the CSS as styles.css in the same folder. The HTML already links to styles.css. You can then open index.html in a browser. The photograph is currently loaded from https://e-nash.net/photos/autumn-road.jpg, so an internet connection is required for that image to appear. If you want to use your own photograph, replace the two background-image: url(...) values with the path to your image.

There is no JavaScript because this particular example is purely HTML and CSS. The visual effect is created entirely through CSS positioning, filters, shadows, transparency and clip-path; there are no buttons, user interactions or dynamic behaviour requiring JavaScript.