Collection of free HTML and CSS <figure> & <figcaption> code examples (with little JS)

Browse a collection of free HTML and CSS figure & figcaption code examples with minimal JavaScript to enhance your website’s media presentation.

Sold Animation

Author:
Christine Black | March 22, 2021

Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari

Responsive:
yes

Dependencies:
-

demo and code

Learn More

Hover

Author:
Kim Min Seob | March 16, 2021

Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari

Responsive:
no

Dependencies:
-

demo and code

Learn More

Sticky Figcaption with Protruding Figure

Author:
Chris Coyier | January 30, 2020

Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari

Responsive:
yes

Dependencies:
-

demo and code

Learn More

Realistic Polaroid Figures

Author:
Kyle Foster | April 28, 2019

Made with:
HTML / CSS

About a code

Realistic polaroid figures in HTML and CSS.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari

Responsive:
yes

Dependencies:
-

demo and code

Learn More

A figure with a figcaption

Author:
Joshua Ward | January 17, 2019

Made with:
HTML (Pug) / CSS (SCSS)

About a code

A figure with a figcaption... and .date that all:hovers.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari

Responsive:
no

Dependencies:
-

demo and code

Learn More

Figure & Figcaption

Author:
Tobias Glaus | July 23, 2018

Made with:
HTML / CSS (SCSS) / JavaScript

About a code

Image with caption using HTML figure and figcaption tags.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari

Dependencies:
jquery.js

demo and code

Learn More

Figure & Figcaption

Author:
Roxy | June 25, 2018

Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari

Responsive:
yes

Dependencies:
-

demo and code

Learn More

Figure & Figcaption

Author:
Abhi | June 25, 2018

Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari

Responsive:
no

Dependencies:
jquery.js, jquery-ui.js

demo and code

Learn More

Gallery with Figure & Figcaption

Author:
Booligoosh | June 25, 2018

Made with:
HTML / CSS

About a code

Parallax image gallery using figure & figcaption tags.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari

Dependencies:
-

demo and code

Learn More

Figure & Figcaption with CSS

Author:
miazura | June 25, 2018

Made with:
HTML / CSS (SCSS) / JavaScript (Babel)

About a code

figure & figcaption using CSS flexbox and some simple styling.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari

Dependencies:
-

demo and code

Learn More

HTML Figure & Figcaption

Author:
Yanely Ramirez | June 24, 2018

Made with:
HTML / CSS (SCSS)

About a code

Simple example of thumbnails using HTML figure & figcaption tags and CSS.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari

Dependencies:
-

demo and code

Learn More

Playful CSS Figure & Figcaption

Author:
Piotr Galor | June 23, 2018

Made with:
HTML / CSS

About a code

Pure CSS, no libs and stuff.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari

Dependencies:
-

demo and code

Learn More

Use Alt Tags in IMG Captions

Author:
Brett Thurston | June 22, 2018

Made with:
HTML / CSS / JavaScript

About a code

Example of how to use alt to print to your img captions. Handy for SEO purposes. Credit to Josh Emrich for his Campy Creature Invader artwork. And JavaScript by CodeJoust on StackExchange.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari

Dependencies:
jquery.js

demo and code

Learn More

HTML Figure & Figcaption

Author:
parph | June 22, 2018

Made with:
HTML (Haml) / CSS (Sass)

About a code

Minimalistic pure CSS carousel with HTML figure and figcaption.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari

Dependencies:
-

demo and code

Learn More

Figure & Caption

Author:
Guillaume | June 22, 2018

Made with:
HTML / CSS

About a code

Animated image thumbnail.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari

Dependencies:
-

demo and code

Learn More

Responsive Image Labels

Author:
Stephen Lee | June 22, 2018

Made with:
HTML / CSS (SCSS)

About a code

Using figcaption to add multiple labels to an image. By changing a CSS variable with media queries, the labels can adjust to a wide variety of screen sizes.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari

Dependencies:
-

demo and code

Learn More

Figure + Figcaption

Author:
Joshua Ward | June 21, 2018

Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari

Responsive:
no

Dependencies:
-

demo and code

Learn More

Interactive Inky

Author:
ycw | June 20, 2018

Made with:
HTML (Pug) / CSS / JavaScript

About a code

figcaption text segments as legends pointing out portion of figure content.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari

Dependencies:
-

demo and code

Learn More

Figure & Figcaption with CSS Hover Effect

Author:
Artem | June 20, 2018

Made with:
HTML (Haml) / CSS (Sass)

About a code

Image hover transition with CSS variables.

Compatible browsers:
Chrome, Firefox, Opera, Safari

Dependencies:
-

demo and code

Learn More

Playful Figure/Figcaption

Author:
Isman Fromes | June 20, 2018

Made with:
HTML (Pug) / CSS (Less) / JavaScript

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari

Dependencies:
jquery.js, TweenMax.js

demo and code

Learn More

Picture Cards - Figure & Figcaption

Author:
Cátia Campos | June 20, 2018

Made with:
HTML / CSS

About a code

Image cards (polaroid style) with description on the back. Hover over the images to see the effect. HTML & CSS.

Compatible browsers:
Chrome, Edge, Opera, Safari

Dependencies:
-

demo and code

Learn More

Figure + Figcaption

Author:
Ryan Mulligan | June 20, 2018

Made with:
HTML (Pug) / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari

Dependencies:
-

demo and code

Learn More

Interactive Pile O’ Polaroids

Author:
Jon Wilcox | June 20, 2018

Made with:
HTML / CSS (Less) / JavaScript

About a code

Toss the photos around or click for a larger version. Photos and captions (authors) are a random selection from "Lorem Picsum". "GreenSock Draggable" for the interaction.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari

Dependencies:
jquery.js, draggable.js, ThrowPropsPlugin.js, TweenLite.js, CSSPlugin.js

demo and code

Learn More

Figure & Figcaption Tags

Author:
Elise | June 19, 2018

Made with:
HTML / CSS

About a code

figure and figcaption ... and a beautifull David Harris's poem.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari

Dependencies:
-

demo and code

Learn More

Lazy Loading Figure + Figcaption & Flipping Card

Author:
Alex Paul | June 18, 2018

Made with:
HTML / CSS / JavaScript

About a code

figure & figcaption combo with some extra features in the form of a short description added on hover of the caption and the back side of the figure for a full description. Can be used in a portfolio to showcase both the work and an extensive description in a relatively small space.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari

Dependencies:
font-awesome.css

demo and code

Learn More

Typing Effect

Author:
Natalia Kuznetsova | June 18, 2018

Made with:
HTML / CSS / JavaScript

About a code

Typing caption on hover.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari

Dependencies:
jquery.js

demo and code

Learn More

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Let's craft a visual identity that ignites passion and loyalty. ✨