Get hand-picked CSS Thumbnails collections. Demos and Tutorial links are available.
1) 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
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
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
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
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
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
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
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)
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
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
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
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
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
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
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 )
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
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
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
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
