40+ HTML <figure> & <figcaption> with CSS - Free Code + Demos
Collection of 40+ HTML <figure> & <figcaption> with CSS. All items are 100% free and open-source.
1. Sticky Figcaption With Protruding Figure
Author: Chris Coyier (chriscoyier)
Links: Source Code / Demo
Created on: January 30, 2020
Made with: HTML, SCSS
2. Realistic Polaroid Figures
Author: Kyle Foster (hkfoster)
Links: Source Code / Demo
Created on: April 27, 2019
Made with: HTML, CSS
3. A <figure> With A <figcaption>... And .date That All:hovers
Author: Joshua Ward (joshuaward)
Links: Source Code / Demo
Created on: January 16, 2019
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
4. Playful CSS Figure & Figcaption
no libs and stuff, submission for #codepenchallenge
Author: Piotr Galor (pgalor)
Links: Source Code / Demo, Codepen.io
Created on: June 23, 2018
Made with: HTML, CSS, JS
Tags: css, toucan, keyframes, codepenchallenge, cpc-figures
5. Figure & Figcaption 2
Author: parph (parph)
Links: Source Code / Demo
Created on: June 22, 2018
Made with: Haml, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: codepenchallenge, cpc-figures
6. Figure & Figcaption 3
A codepen challenge
Author: Abhi (AbhiPatel18)
Links: Source Code / Demo
Created on: June 25, 2018
Made with: HTML, CSS, JS
Tags: codepenchallenge, captions, imae, astronaut
7. Gallery With Figure & Figcaption
Author: Booligoosh (Booligoosh)
Links: Source Code / Demo
Created on: June 25, 2018
Made with: HTML, CSS
Tags: codepenchallenge, cpc-figures
8. Figure & Figcaption With CSS
Codepenchellenge: Figure & Figcaption using CSS flexbox ans some simple styling.
Author: miazura (miazura)
Links: Source Code / Demo
Created on: June 25, 2018
Made with: HTML, SCSS
Tags: codepenchellenge, cpc-figures, flexbox
9. HTML Figure & Figcaption
Author: Yanely Ramirez (yxnely)
Links: Source Code / Demo
Created on: June 24, 2018
Made with: HTML, SCSS
Tags: html, cpc-figures, css, codepenchallenge
10. Playful CSS Figure & Figcaption
Author: Piotr Galor (pgalor)
Links: Source Code / Demo
Created on: June 23, 2018
Made with: HTML, CSS, JS
Tags: css, toucan, keyframes, codepenchallenge, cpc-figures
11. Use Alt Tags In IMG Captions
Example of how to use ALT tags 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.
Author: Brett Thurston (ohBretterson)
Links: Source Code / Demo
Created on: June 22, 2018
Made with: HTML, CSS, JS
Tags: cpc-figures, codepenchallenge, alt, img
12. HTML Figure & Figcaption 2
Author: parph (parph)
Links: Source Code / Demo
Created on: June 22, 2018
Made with: Haml, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: codepenchallenge, cpc-figures
13. Figure & Caption
Author: Guillaume . G (Kintaris)
Links: Source Code / Demo
Created on: June 22, 2018
Made with: HTML, CSS
Tags: cpc-figures
14. 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.
Author: Stephen Lee (abcretrograde)
Links: Source Code / Demo
Created on: June 21, 2018
Made with: HTML, SCSS
Tags: codepenchallenge, cpc-figures, css-variables, custom properties, pure-css
15. Figure + Figcaption
My faux trip as told through figures and figcaptions for the #CodePenChallenge
Author: Ryan Mulligan (hexagoncircle)
Links: Source Code / Demo
Created on: June 20, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: figure, figcaption, grid, photo-gallery, cpc-figures
16. Interactive Inky
figcaption text segments as legends pointing out portion of figure content Inky
Author: ycw (ycw)
Links: Source Code / Demo
Created on: June 20, 2018
Made with: Pug, CSS, JS
CSS Pre-processor: None
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: codepenchallenge
17. Figure & Figcaption With CSS Hover Effect
Image hover transition w/ CSS variables. Works almost everywhere, except IE.
Author: Artem (artyschein)
Links: Source Code / Demo
Created on: June 20, 2018
Made with: Haml, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: codepenchallenge, cpc-figures, animataion, clip-path, css-variables
18. Playful Figure-Figcaption
A try to a more playful figure/figcaption. Image: Teodor Hristov & FM ILLUSTRATION.
Author: Isman Fromes (ismanfromes)
Links: Source Code / Demo
Created on: June 20, 2018
Made with: Pug, Less, JS
CSS Pre-processor: Less
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: gsap, codepenchallenge, cpc-figures, animation
19. Picture Cards Figure & Figcaption
Image cards (polaroid style) with description on the back. Hover over the images to see the effect. HTML & CSS
Author: Cátia Campos (catiacampos)
Links: Source Code / Demo
Created on: June 20, 2018
Made with: HTML, CSS
Tags: cpc-figures, polaroid, card, gallery, css
20. Figure + Figcaption
My faux trip as told through figures and figcaptions for the #CodePenChallenge
Author: Ryan Mulligan (hexagoncircle)
Links: Source Code / Demo
Created on: June 20, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: figure, figcaption, grid, photo-gallery, cpc-figures
21. 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.
Author: Jon Wilcox (jonwilcox)
Links: Source Code / Demo
Created on: June 20, 2018
Made with: HTML, Less, JS
Tags: codepenchallenge, cpc-figures
22. Figure & Figcaption Tags
Figure and figcaption ... and a beautifull David Harris's poem.
Author: Elise (Elisse)
Links: Source Code / Demo
Created on: June 19, 2018
Made with: HTML, CSS
Tags: codepenchallenge, figure, figcaption, hover, cpc-figures
23. Lazy Loading Fig+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.
Author: Alex Paul (alex_paul)
Links: Source Code / Demo
Created on: June 18, 2018
Made with: HTML, CSS, JS
Tags: codepenchallenge, cpc-figures, card, flip, lazy-loading
24. Typing Effect
typing caption on hover
Author: Natalia Kuznetsova (lindenalee)
Links: Source Code / Demo
Created on: June 18, 2018
Made with: HTML, CSS, JS
Tags: codepenchallenge, typing-effect, art
25. <figure> And <figcaption>
a bit late... but better late than never :) figure and figcaption experiment
Author: Daniel Fontes (dffontes)
Links: Source Code / Demo
Created on: July 4, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: cpc-figures, codepenchallenge
26. Figure Of Grid Of Figures
Author: Fatma Nabilla (fatmanabilla)
Links: Source Code / Demo
Created on: June 24, 2018
Made with: HTML, CSS
Tags: codepenchallenge, cpc-figures
27. Hover Photo Grid
A simple Photo Grid by using only CSS. Hover it !!!
Author: Amli (uzcho_)
Links: Source Code / Demo
Created on: June 24, 2018
Made with: HTML, CSS
Tags: codepenchallenge, cpc-figures, photo grid, css-grid, image-grid
28. Figure & Caption Example
Author: Guillaume . G (Kintaris)
Links: Source Code / Demo
Created on: June 22, 2018
Made with: HTML, CSS
Tags: cpc-figures
29. Figure & Figcaption Instax Version
CodePen Challenge: Figure & Figcaption Instax Version
Author: chndlr (chndlr)
Links: Source Code / Demo
Created on: June 21, 2018
Made with: HTML, SCSS
Tags: codepenchallenge, cpc-figures
30. Image Fig Caption
Fig Caption - #CodePenChallenge #cpc-figures
Author: DeadlySif (DeadlySif)
Links: Source Code / Demo
Created on: June 21, 2018
Made with: HTML, CSS
Tags: codepenchallenge, cpc, cpc-figures
31. Figures & Captions
Author: Ben (benrobyg)
Links: Source Code / Demo
Created on: June 20, 2018
Made with: HTML, SCSS
Tags: cpc-figures, codepenchallenge
32. Pokemon Figures
abusing gradients like it's my job. (it's not.) (but it could be.)
Author: Clara Beyer (csb324)
Links: Source Code / Demo
Created on: June 20, 2018
Made with: HTML, SCSS, JS
Tags: codepenchallenge, cpc-figures, pokemon
33. Red Figure & Figcaption
Author: markandan (markandan)
Links: Source Code / Demo
Created on: June 20, 2018
Made with: HTML, CSS
Tags: codepenchallenge, cpc-figures
34. CSS Figures
Did you know "Object-fit: cover" helps out that your image not becoming stretched.
Author: Owa Aquino (owaaquino)
Links: Source Code / Demo
Created on: June 19, 2018
Made with: HTML, CSS
Tags: cpc-figures, codepenchallenge, html, figures
35. CPC: Figure & Figcaption Image Gallery With LightBox
Figure with figcaption as image gallery with pure css lightbox. Smooth transition and clip path included.
Author: Kirill (kirillkrasin)
Links: Source Code / Demo
Created on: June 19, 2018
Made with: HTML, CSS
Tags: cpc-figures, codepenchallenge, clip-path, lightbox
36. HTML Figure & Fig-caption
use of and tags as per the challenge to showcase my favourite travel destinations.
Author: Komal Jituri (moondust_kj)
Links: Source Code / Demo
Made with: HTML, SCSS
37. CPC - Figures/Figcaption - Spherical Layout
Author: Jaclyn Staples (jaclynonacloud)
Links: Source Code / Demo
Created on: June 18, 2018
Made with: HTML, CSS, JS
Tags: cpc-figures
More Awesome Lists:
Share: