TOP 20 HTML <figure> & <figcaption> with CSS

REALISTIC POLAROID FIGURES

Realistic polaroid figures in HTML and CSS.

See the Pen Realistic Polaroid Figures by Kyle Foster (@hkfoster) on CodePen.light

Author

  • Kyle Foster

Made with

  • HTML / CSS

A FIGURE WITH A FIGCAPTION

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

See the Pen A <figure> with a <figcaption>… and .date that all:hovers by Joshua Ward (@joshuaward) on CodePen.light

Author

  • Joshua Ward

Made with

  • HTML (Pug) / CSS (SCSS)

FIGURE & FIGCAPTION

Image with caption using HTML figure and figcaption tags.

See the Pen Figure & Figcaption by Tobias Glaus (@tobiasglaus) on CodePen.light

Author

  • Tobias Glaus

Made with

  • HTML / CSS (SCSS) / JavaScript

GALLERY WITH FIGURE & FIGCAPTION

Parallax image gallery using figure & figcaption tags.

See the Pen Parallax image gallery using Figure & Figcaption – #CodePenChallenge by Booligoosh (@Booligoosh) on CodePen.light

Author

  • Booligoosh

Made with

  • HTML / CSS

FIGURE & FIGCAPTION WITH CSS

figure & figcaption using CSS flexbox and some simple styling.

See the Pen Figure & Figcaption: #codepenchallenge by miazura (@miazura) on CodePen.light

Author

  • miazura

Made with

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

HTML FIGURE & FIGCAPTION

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

See the Pen Figure & Figcaption #CodePenChallenge by Yanely Ramirez (@yxnely) on CodePen.light

Author

  • Yanely Ramirez

Made with

  • HTML / CSS (SCSS)

PLAYFUL CSS FIGURE & FIGCAPTION

Pure CSS, no libs and stuff.

See the Pen Playful CSS figure & figcaption by Piotr Galor (@pgalor) on CodePen.light

Author

  • Piotr Galor

Made with

  • HTML / CSS

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.

Demo image: Use Alt Tags in IMG Captions

Author

  • Brett Thurston

Made with

  • HTML / CSS / JavaScript

HTML FIGURE & FIGCAPTION

Minimalistic pure CSS carousel with HTML figure and figcaption.

Demo image: HTML Figure & Figcaption

Author

  • parph

Made with

  • HTML (Haml) / CSS (Sass)

FIGURE & CAPTION

Animated image thumbnail.

Figure & Caption - GIF Demo

Author

  • Guillaume

Made with

  • HTML / CSS

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.

See the Pen Responsive image labels #CodePenChallenge cpc-figures by Stephen Lee (@abcretrograde) on CodePen.light

Author

  • Stephen Lee

Made with

  • HTML / CSS (SCSS)

INTERACTIVE INKY

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

Interactive Inky - GIF Demo

Author

  • ycw

Made with

  • HTML (Pug) / CSS / JavaScript

FIGURE & FIGCAPTION WITH CSS HOVER EFFECT

Image hover transition with CSS variables.

Demo image: Figure & Figcaption with CSS Hover Effect

Author

  • Artem

Made with

  • HTML (Haml) / CSS (Sass)

PLAYFUL FIGURE/FIGCAPTION

A try to a more playful figure/figcaption.

See the Pen Playful Figure/Figcaption | #CodePenChallenge by Isman Fromes (@ismanfromes) on CodePen.light

Author

  • Isman Fromes

Made with

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

PICTURE CARDS – FIGURE & FIGCAPTION

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

See the Pen Picture Cards – Figure & Figcaption #CodePenChallenge by Cátia Campos (@catiacampos) on CodePen.light

Author

  • Cátia Campos

Made with

  • HTML / CSS

FIGURE + FIGCAPTION

My faux trip as told through figures and figcaptions.

See the Pen Figure + Figcaption by Ryan Mulligan (@hexagoncircle) on CodePen.light

Author

  • Ryan Mulligan

Made with

  • HTML (Pug) / CSS (SCSS)

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.

See the Pen Interactive Pile O’ Polaroids by Jon Wilcox (@jonwilcox) on CodePen.light

Author

  • Jon Wilcox

Made with

  • HTML / CSS (Less) / JavaScript

FIGURE & FIGCAPTION TAGS

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

See the Pen Figure & Figcaption #codepenchallenge by Elise (@Elisse) on CodePen.light

Author

  • Elise

Made with

  • HTML / CSS

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.

See the Pen Lazy Loading Fig+Figcaption & Flipping Card by Alex Paul (@alex_paul) on CodePen.light

Author

  • Alex Paul

Made with

  • HTML / CSS / JavaScript

TYPING EFFECT

Typing caption on hover.

See the Pen Kandinsky. Typing Effect #codepenchallenge by Natalia Kuznetsova (@lindenalee) on CodePen.light

Author

  • Natalia Kuznetsova

Made with

  • HTML / CSS / JavaScript

 

Post navigation