Collection of free HTML and CSS <figure> & <figcaption> code examples (with little JS). Update of June 2019 collection. 4 new items.

  1. CSS Thumbnails
  2. CSS Image Effects

Creator

  • Chris Coyier

Programming language

  • HTML / CSS (SCSS)

Information a code

Sticky Figcaption with Protruding Figure

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Demo image: Realistic Polaroid Figures

Creator

  • Kyle Foster

Programming language

  • HTML / CSS

Information the code

Realistic Polaroid Figures

Realistic polaroid figures in HTML and CSS.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Joshua Ward

Programming language

  • HTML (Pug) / CSS (SCSS)

Information the code

A figure with a figcaption

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Demo image: Figure & Figcaption Figure & Figcaption - GIF Demo

Creator

  • Tobias Glaus

Programming language

  • HTML / CSS (SCSS) / JavaScript

Information the code

Figure & Figcaption

Image with caption using HTML figure and figcaption tags.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Creator

  • Roxy

Programming language

  • HTML / CSS (SCSS)

Information a code

Figure & Figcaption

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Abhi

Programming language

  • HTML / CSS / JS

Information a code

Figure & Figcaption

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, jquery-ui.js

Demo image: Gallery with Figure & Figcaption

Creator

  • Booligoosh

Programming language

  • HTML / CSS

Information the code

Gallery with Figure & Figcaption

Parallax image gallery using figure & figcaption tags.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Figure & Figcaption with CSS

Creator

  • miazura

Programming language

  • HTML / CSS (SCSS) / JavaScript (Babel)

Information the code

Figure & Figcaption with CSS

figure & figcaption using CSS flexbox and some simple styling.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: HTML Figure & Figcaption HTML Figure & Figcaption - GIF Demo

Creator

  • Yanely Ramirez

Programming language

  • HTML / CSS (SCSS)

Information the code

HTML Figure & Figcaption

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Playful CSS Figure & Figcaption Playful CSS Figure & Figcaption - GIF Demo

Creator

  • Piotr Galor

Programming language

  • HTML / CSS

Information the code

Playful CSS Figure & Figcaption

Pure CSS, no libs and stuff.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Use Alt Tags in IMG Captions

Creator

  • Brett Thurston

Programming language

  • HTML / CSS / JavaScript

Information the code

Use Alt Tags in IMG Captions

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.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Demo image: HTML Figure & Figcaption

Creator

  • parph

Programming language

  • HTML (Haml) / CSS (Sass)

Information the code

HTML Figure & Figcaption

Minimalistic pure CSS carousel with HTML figure and figcaption.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Figure & Caption Figure & Caption - GIF Demo

Creator

  • Guillaume

Programming language

  • HTML / CSS

Information the code

Figure & Caption

Animated image thumbnail.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Responsive Image Labels

Creator

  • Stephen Lee

Programming language

  • HTML / CSS (SCSS)

Information the code

Responsive Image Labels

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.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Creator

  • Joshua Ward

Programming language

  • HTML / CSS (SCSS)

Information a code

Figure + Figcaption

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Demo image: Interactive Inky Interactive Inky - GIF Demo

Creator

  • ycw

Programming language

  • HTML (Pug) / CSS / JavaScript

Information the code

Interactive Inky

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Figure & Figcaption with CSS Hover Effect

Creator

  • Artem

Programming language

  • HTML (Haml) / CSS (Sass)

Information the code

Figure & Figcaption with CSS Hover Effect

Image hover transition with CSS variables.

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

Demo image: Playful Figure/Figcaption Playful Figure/Figcaption - GIF Demo

Creator

  • Isman Fromes

Programming language

  • HTML (Pug) / CSS (Less) / JavaScript

Information the code

Playful Figure/Figcaption

A try to a more playful figure/figcaption.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js, TweenMax.js

Demo image: Picture Cards - Figure & Figcaption Picture Cards - Figure & Figcaption - GIF Demo

Creator

  • Cátia Campos

Programming language

  • HTML / CSS

Information the code

Picture Cards – Figure & Figcaption

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

Browser Support: Chrome, Edge, Opera, Safari

Dependencies:

Demo image: Figure + Figcaption Figure + Figcaption - GIF Demo

Creator

  • Ryan Mulligan

Programming language

  • HTML (Pug) / CSS (SCSS)

Information the code

Figure + Figcaption

My faux trip as told through figures and figcaptions.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Interactive Pile O’ Polaroids

Creator

  • Jon Wilcox

Programming language

  • HTML / CSS (Less) / JavaScript

Information the code

Interactive Pile O’ Polaroids

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.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

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

Demo image: Figure & Figcaption Tags Figure & Figcaption Tags - GIF Demo

Creator

  • Elise

Programming language

  • HTML / CSS

Information the code

Figure & Figcaption Tags

figure and figcaption … and a beautifull David Harris’s poem.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Lazy Loading Figure + Figcaption & Flipping Card Lazy Loading Figure + Figcaption & Flipping Card - GIF Demo

Creator

  • Alex Paul

Programming language

  • HTML / CSS / JavaScript

Information the code

Lazy Loading Figure + Figcaption & Flipping Card

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.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Typing Effect Typing Effect - GIF Demo

Creator

  • Natalia Kuznetsova

Programming language

  • HTML / CSS / JavaScript

Information the code

Typing Effect

Typing caption on hover.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js