Collection of free HTML and CSS image thumbnail code examples. Update of June 2019 collection. 7 new items.

  1. CSS Image Effects
  2. HTML <figure> & <figcaption> with CSS
  3. CSS Galleries
  4. jQuery Galleries

Creator

  • Abubaker Saeed

Programming language

  • HTML / CSS

Information a code

CSS Image Hover Effects

Trying out hover effects.

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

Responsive: yes

Dependencies:

Creator

  • Aybüke Ceylan

Programming language

  • HTML / CSS (SCSS)

Information a code

CSS Thumbnail Hover Effects

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

Responsive: yes

Dependencies:

Creator

  • Raymond

Programming language

  • HTML / CSS

Information a code

Respopnsive Images with Thumbnails

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

Responsive: yes

Dependencies:

Creator

  • Sikriti Dakua

Programming language

  • HTML / CSS (SCSS)

Information a code

Thumbnail Hover Interaction

Pure CSS thumbnail hover interaction.

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

Responsive: yes

Dependencies:

Creator

  • Rajesh Bhattarai

Programming language

  • HTML / CSS

Information a code

CSS Thumbnail Text Hover

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

Responsive: no

Dependencies:

Creator

  • YJ

Programming language

  • HTML (Pug) / CSS (Sass)

Information the code

Split Image Thumbnail

Split thumbnail image on hover in HTML and CSS.

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

Responsive: yes

Dependencies:

Creator

  • Javier Lopez

Programming language

  • HTML / CSS

Information a code

CSS Thumbnail Transition Effects

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

Responsive: yes

Dependencies:

Creator

  • Simto Alev

Programming language

  • HTML / CSS (SCSS)

Information the code

Animated Gallery Thumbnails

A fancy responsive CSS animated gallery thumbnails.

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

Responsive: yes

Dependencies:

Demo image: Thumbnail Hover Effects Thumbnail Hover Effects - GIF Demo

Creator

  • Nikhil Krishnan

Programming language

  • HTML / CSS (SCSS)

Information the code

Thumbnail Hover Effects

Pure CSS3 image thumbnail hover effects, also we can easily change the grid item per row using by Sass variable.

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

Dependencies:

Creator

  • Hansford Nguyen

Programming language

  • HTML (Haml) / CSS (SCSS)

Information a code

Fotobook Album Thumbnail

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

Responsive: no

Dependencies:

Demo image: Document Thumbnail with CSS Custom Property Document Thumbnail with CSS Custom Property - GIF Demo

Creator

  • Scott Henderson

Programming language

  • HTML (Slim) / CSS (SCSS)

Information the code

Document Thumbnail with CSS Custom Property

Dog-ear will position itself it top right corner regardless of original size / aspect ratio of image. Effect achieved by using hidden img to set size of relatively positioned parent container – then two absolutely positioned pseudo elements with the same image as a background overlap to leave dog-ear gap top right. Image url supplied by custom property declared inline in HTML.

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

Dependencies:

Demo image: Thumbnail Effect Thumbnail Effect - GIF Demo

Creator

  • Amrit Pandey

Programming language

  • HTML / CSS

Information the code

Thumbnail Effect

Image thumbnail hover effect.

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

Dependencies: font-awesome.css

Demo image: Thumbnail Hover

Creator

  • Amol V Bharambe

Programming language

  • HTML / CSS

Information the code

Thumbnail Hover

CSS thumbnail hover with caption and social buttons.

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

Dependencies: bootstrap.css, font-awesome.css

Demo image: Thumbnail Presentation with CSS Grid

Creator

  • Aysha Anggraini

Programming language

  • HTML / CSS (SCSS)

Information the code

Thumbnail Presentation with CSS Grid

This should work with older browsers as far as IE9. Older browsers and non-supporting browsers will get a “conservative” design instead.

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

Dependencies:

Demo image: flex- thumbnails

Creator

  • NaveenBhaskar

Programming language

  • HTML / CSS (SCSS)

Information the code

flex- thumbnails

CSS flexbox thumbnail arrangements.

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

Dependencies:

Demo image: CSS Responsive Thumbnail CSS Responsive Thumbnail - GIF Demo

Creator

  • raykuo

Programming language

  • HTML (Pug) / CSS (SCSS)

Information the code

CSS Responsive Thumbnail

CSS Thumbnail responsive flexbox hover transition.

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

Dependencies:

Demo image: CSS Thumbnail CSS Thumbnail - GIF Demo

Creator

  • raykuo

Programming language

  • HTML (Pug) / CSS

Information the code

CSS Thumbnail

Thumbnail CSS hover transition.

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

Dependencies:

Demo image: Flexbox YouTube Thumbnail Grid Flexbox YouTube Thumbnail Grid - GIF Demo

Creator

  • Greg Sweet

Programming language

  • HTML / CSS (SCSS) / JavaScript

Information the code

Flexbox YouTube Thumbnail Grid

Responsive flexbox unordered list grid of YouTube video thumbnails with Fancybox links. Uses a 9kb image with a 16:9 aspect ratio to be able to use the YouTube thumbnails as a background image, without seeing those black letterbox bars at the top and bottom. This also makes the video thumbnails fluid when resizing the browser.

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

Dependencies: jquery.fancybox-three.css, jquery.js, jquery.fancybox-three.js

Demo image: Thumbnail Hover Thumbnail Hover - GIF Demo

Creator

  • Nathan Long

Programming language

  • HTML / CSS (SCSS)

Information the code

Thumbnail Hover

Angled thumbnail hover interaction.

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

Dependencies:

Demo image: Thumbnail with Animated Captions Thumbnail with Animated Captions - GIF Demo

Creator

  • Anselm Urban

Programming language

  • HTML / CSS

Information the code

Thumbnail with Animated Captions

In combination with data attributes, you can build a thumbnail image with title and description using just one single line of HTML code.

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

Dependencies:

Demo image: Artist Radio Thumbnails

Creator

  • Alan Shortis

Programming language

  • HTML / CSS (SCSS)

Information the code

Artist Radio Thumbnails

Recreation of Spotify artist radio thumbnails.

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

Dependencies:

Demo image: Pure CSS Perfect Square Thumbnails Gallery Pure CSS Perfect Square Thumbnails Gallery - GIF Demo

Creator

  • Hitz Kareaga

Programming language

  • HTML / CSS (SCSS)

Information the code

Pure CSS Perfect Square Thumbnails Gallery

A responsive image gallery using only CSS with a centered button on the hover and centered and cropped thumbnails.

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

Dependencies:

Demo image: Pure CSS Thumbnail Hover Effect Pure CSS Thumbnail Hover Effect - GIF Demo

Creator

  • Aysha Anggraini

Programming language

  • HTML / CSS

Information the code

Pure CSS Thumbnail Hover Effect

Thumbnail hover effect with CSS3.

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

Dependencies:

Demo image: Rounded Thumbnails Portfolio

Creator

  • Pavel Burov

Programming language

  • HTML / CSS (SCSS)

Information the code

Rounded Thumbnails Portfolio

Presents portfolio as randomly placed rounded thumbnails that expands to full width and height on hover. Description appears on one of the sides with smooth rotating effect.

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

Dependencies:

Demo image: Flipping Thumbnails

Creator

  • Christophe Béghin

Programming language

  • HTML / CSS / JavaScript

Information the code

Flipping Thumbnails

Flipping thumbnails in HTML, CSS and JavaScript.

Browser Support: Chrome, Opera, Safari

Dependencies: jquery.js