26 HTML <figure> & <figcaption> with CSS

About a code

Sold Animation

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

Responsive: yes

Dependencies: -

About a code

Hover

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

Responsive: no

Dependencies: -

About a code

Sticky Figcaption with Protruding Figure

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

Responsive: yes

Dependencies: -

About the code

Realistic Polaroid Figures

Realistic polaroid figures in HTML and CSS.

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

Responsive: yes

Dependencies: -

About the code

A figure with a figcaption

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

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

Responsive: no

Dependencies: -

About the code

Figure & Figcaption

Image with caption using HTML figure and figcaption tags.

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

Dependencies: jquery.js

About a code

Figure & Figcaption

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

Responsive: yes

Dependencies: -

About a code

Figure & Figcaption

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

Responsive: no

Dependencies: jquery.js, jquery-ui.js

About the code

Gallery with Figure & Figcaption

Parallax image gallery using figure & figcaption tags.

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

Dependencies: -

About the code

Figure & Figcaption with CSS

figure & figcaption using CSS flexbox and some simple styling.

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

Dependencies: -

About the code

HTML Figure & Figcaption

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

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

Dependencies: -

About the code

Playful CSS Figure & Figcaption

Pure CSS, no libs and stuff.

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

Dependencies: -

About 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.

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

Dependencies: jquery.js

About the code

HTML Figure & Figcaption

Minimalistic pure CSS carousel with HTML figure and figcaption.

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

Dependencies: -

About the code

Figure & Caption

Animated image thumbnail.

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

Dependencies: -

About 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.

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

Dependencies: -

About a code

Figure + Figcaption

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

Responsive: no

Dependencies: -

About the code

Interactive Inky

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

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

Dependencies: -

About the code

Figure & Figcaption with CSS Hover Effect

Image hover transition with CSS variables.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

About the code

Playful Figure/Figcaption

A try to a more playful figure/figcaption.

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

Dependencies: jquery.js, TweenMax.js

About 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.

Compatible browsers: Chrome, Edge, Opera, Safari

Dependencies: -

About the code

Figure + Figcaption

My faux trip as told through figures and figcaptions.

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

Dependencies: -

About 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.

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

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

About the code

Figure & Figcaption Tags

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

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

Dependencies: -

About 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.

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

Dependencies: font-awesome.css

About the code

Typing Effect

Typing caption on hover.

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

Dependencies: jquery.js