19 CSS Thumbnails

Get hand-picked CSS Thumbnails collections. Demos and Tutorial links are available.

1) Loading a Video by Thumbnail

Loading a Video by Thumbnail
Demo Image: Loading a Video by Thumbnail

This sample fetches information for additional videos using the player catalog. The thumbnail images for the videos are shown below the player, and clicking on one will load and play that video.

Author: Brightcove Learning Services
Created: SEPTEMBER 01, 2017
Made with: HTML, CSS and JavaScript

2) Thumbnail Gallery with Hover Effect

Thumbnail Gallery with Hover Effect
Demo Image: Thumbnail Gallery with Hover Effect

Display: flexbox is on the gallery list to avoid overflow and clearing issues. Images are wrapped within link-tags with position: relative. When having the thumbnail absolute positioned, one can than for example transition the values for max-width from 100% to 120%, and adept the values for left and top on those thumbnail images (on hovering those wrapper links). All this giving the effect of scaling the images on hover with smooth transitions in minimal code.

Author: Bram de Haan
Created: JULY 28, 2016
Made with: HTML, CSS

3) Responsive thumbnail images with clickable captions

Responsive thumbnail images with translucent, clickable captions
Demo Image: Responsive thumbnail images with translucent, clickable captions

Row of four responsive thumbnail images with a transparent, linked caption and a font awesome icon

Author: Jim Wallace
Created: MAY 11, 2018
Made with: HTML, CSS

4) Folding thumbnail image with GSAP

Folding thumbnail image with GSAP
Demo Image: Folding thumbnail image with GSAP

Just simple folding animation for image thumbnail

Author: Akbar Putra
Created: JANUARY 27, 2015
Made with: HTML, CSS(SCSS) and JavaScript

5) Image caption on hover state

Image caption on hover state
Demo Image: Image caption on hover state

In combination with data attributes, is possible to build a thumbnail image with title and description.

Author: Massimiliano Ranauro
Created: SEPTEMBER 10, 2016
Made with: HTML, CSS(SCSS)

6) CSS 3D Captioned Domino Image

CSS 3D Captioned Domino Image
Demo Image: CSS 3D Captioned Domino Image

Derived from a technique on CodePlayer but made responsive, with better semantic markup, fewer pseudo-elements, and less CSS.

Author: Dudley Storey
Created: FEBRUARY 15, 2014
Made with: HTML, CSS

7) Product Image Gallery with Thumbnails

Product Image Gallery with Thumbnails
Demo Image: Product Image Gallery with Thumbnails

Requires jQuery

Author: Justine
Created: MARCH 18, 2017
Made with: HTML, CSS(SCSS) and JavaScript

8) FancyBox – Thumbnail Images

FancyBox - Thumbnail Images
Demo Image: FancyBox – Thumbnail Images

FancyBox – Thumbnail Images

Author: Janis Skarnelis
Created: JANUARY 05, 2017
Made with: HTML, CSS and JavaScript

9) CSS3 translate slider(next&prev arrow, thumbnail image)

css3 translate slider(next&prev arrow, thumbnail image)
Demo Image: css3 translate slider(next&prev arrow, thumbnail image)

css3 translate slider with next&prev arrow and thumbnail image.

Author: Hamada Fayyad
Created: MARCH 30, 2017
Made with: HTML, CSS

10) Pure CSS Lightbox

Pure CSS Lightbox
Demo Image: Pure CSS Lightbox

Here is a pure CSS lightbox made possible by use of the :target CSS selector.

Author: Gregory Schier
Created: NOVEMBER 16, 2013
Made with: HTML, CSS

11) List with Thumbnails

List with Thumbnails
Demo Image: List with Thumbnails

A list of items that contain a thumbnail image and a block of text, which could be as simple as a headline, but could also contain sub-text or calls to action.

Author: Brad Frost
Created: SEPTEMBER 10, 2012
Made with: HTML, CSS

12) Thumbnail images gallery in lightbox

Thumbnail images gallery in lightbox
Demo Image: Thumbnail images gallery in lightbox

Used Bootstrap modal and Slick carousel to make Thumbnail images gallery in lightbox.

Author: Vinod Patil
Created: MAY 03, 2016
Made with: HTML, CSS and JavaScript

13) CSS Thumbnail Transition Effects

CSS Thumbnail Transition Effects
Demo Image: CSS Thumbnail Transition Effects

CSS Thumbnail Transition Effects

Author: Javier Lopez
Created: DECEMBER 06, 2018
Made with: HTML, CSS

14) CSS Thumbnail Hover Effects

CSS Thumbnail Hover Effects
Demo Image: CSS Thumbnail Hover Effects

Experimenting with transforming thumbnails on hover.

Author: Jon Lunsford
Created: MAY 14, 2013
Made with: HTML/HAML, CSS/SCSS

15) Animated CSS thumbnail gallery

Animated CSS thumbnail gallery
Demo Image: Animated CSS thumbnail gallery

Animated CSS Thumbnail gallery. Hover over each image

Author: Jason
Created: OCTOBER 26, 2018
Made with: HTML, CSS

16) Pure CSS thumbnail slider (Horizontal )

Pure CSS thumbnail slider (Horizontal )
Demo Image: Pure CSS thumbnail slider (Horizontal )

Pure CSS thumbnail slider (Horizontal )

Author: digistate
Created: FEBRUARY 26, 2019
Made with: HTML, CSS

17) Cropped image thumbnails with SVG

Cropped image thumbnails with SVG
Demo Image: Cropped image thumbnails with SVG

Centered and Cropped Thumbnails with CSS

Author: Tyler Sticka
Created: AUGUST 13, 2016
Made with: HTML, CSS

18) Pure CSS Thumbnail Hover Effect

Pure CSS Thumbnail Hover Effect
Demo Image: Pure CSS Thumbnail Hover Effect

This was inspired by an old blog post of Sohtanaka. He had created a similar effect using jQuery. Replicated the same effect with CSS3. Final result is slightly different compared to his but it is still the same effect. Link to the original tutorial and demo is included in the pen above.

Author: Aysha Anggraini
Created: NOVEMBER 21, 2013
Made with: HTML, CSS

19) CSS Thumbnail responsive flexbox hover transition

CSS Thumbnail responsive flexbox hover transition
Demo Image: CSS Thumbnail responsive flexbox hover transition

A quick pen to play around with flexbox hover transition.

Author: raykuo
Created: AUGUST 01, 2017
Made with: HTML, CSS
W3TWEAKS
Latest posts by W3TWEAKS (see all)

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *