17 CSS Thumbnails

Collection of free HTML and CSS thumbnail code examples.

Related Articles

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

Author

• Nikhil Krishnan
• July 6, 2018

Links

• demo and code

Made with

• HTML / CSS (SCSS)

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

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

Dependencies: -

Author

• Scott Henderson
• November 9, 2017

Links

• demo and code

Made with

• HTML (Slim) / CSS (SCSS)

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

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

Dependencies: -

Author

• Amrit Pandey
• November 8, 2017

Links

• demo and code

Made with

• HTML / CSS

About the code

Thumbnail Effect

Image thumbnail hover effect.

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

Dependencies: font-awesome.css

Author

• Amol V Bharambe
• November 2, 2017

Links

• demo and code

Made with

• HTML / CSS

About the code

Thumbnail Hover

CSS thumbnail hover with caption and social buttons.

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

Dependencies: bootstrap.css, font-awesome.css

Author

• Aysha Anggraini
• September 29, 2017

Links

• demo and code

Made with

• HTML / CSS (SCSS)

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

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

Dependencies: -

Author

• NaveenBhaskar
• August 30, 2017

Links

• demo and code

Made with

• HTML / CSS (SCSS)

About the code

flex- thumbnails

CSS flexbox thumbnail arrangements.

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

Dependencies: -

Author

• raykuo
• August 1, 2017

Links

• demo and code

Made with

• HTML (Pug) / CSS (SCSS)

About the code

CSS Responsive Thumbnail

CSS Thumbnail responsive flexbox hover transition.

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

Dependencies: -

Author

• raykuo
• July 10, 2017

Links

• demo and code

Made with

• HTML (Pug) / CSS

About the code

CSS Thumbnail

Thumbnail CSS hover transition.

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

Dependencies: -

Author

• Greg Sweet
• November 6, 2016

Links

• demo and code

Made with

• HTML / CSS (SCSS) / JavaScript

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

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

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

Author

• Nathan Long
• September 23, 2016

Links

• demo and code

Made with

• HTML / CSS (SCSS)

About the code

Thumbnail Hover

Angled thumbnail hover interaction.

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

Dependencies: -

Author

• Anselm Urban
• August 15, 2016

Links

• demo and code

Made with

• HTML / CSS

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

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

Dependencies: -

Author

• Alan Shortis
• May 8, 2016

Links

• demo and code

Made with

• HTML / CSS (SCSS)

About the code

Artist Radio Thumbnails

Recreation of Spotify artist radio thumbnails.

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

Dependencies: -

Author

• Hitz Kareaga
• November 30, 2015

Links

• demo and code

Made with

• HTML / CSS (SCSS)

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

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

Dependencies: -

Author

• Yogev Ahuvia
• February 28, 2014

Links

• demo and code

Made with

• HTML / CSS (SCSS) / JavaScript

About the code

Thumbnail Animation Effects

Various grid style galleries that use CSS animations & transitions to morph thumb-sized blocks into full-size images.

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

Dependencies: jquery.js

Author

• Aysha Anggraini
• November 21, 2013

Links

• demo and code

Made with

• HTML / CSS

About the code

Pure CSS Thumbnail Hover Effect

Thumbnail hover effect with CSS3.

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

Dependencies: -

Author

• Pavel Burov
• April 7, 2013

Links

• demo and code

Made with

• HTML / CSS (SCSS)

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

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

Dependencies: -

Author

• Christophe Béghin
• February 19, 2013

Links

• demo and code

Made with

• HTML / CSS / JavaScript

About the code

Flipping Thumbnails

Flipping thumbnails in HTML, CSS and JavaScript.

Compatible browsers: Chrome, Opera, Safari

Dependencies: jquery.js