w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Script
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
Home Media

19 CSS Thumbnails

November 13, 2019
in Media

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

You might also like

Animated Fullscreen and grid view Slider

Unicycle Range Slider

15 CSS Sliders

10 CSS Logo Designs

CSS Advent Calendar

HTML Audio Player

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.

Tutorial/codes – Demo

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.

Tutorial/codes – Demo

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

Tutorial/codes – Demo

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

Tutorial/codes – Demo

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.

Tutorial/codes – Demo

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.

Tutorial/codes – Demo

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

Tutorial/codes – Demo

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

Tutorial/codes – Demo

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.

Tutorial/codes – Demo

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.

Tutorial/codes – Demo

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.

Tutorial/codes – Demo

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.

Tutorial/codes – Demo

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

Tutorial/codes – Demo

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.

Tutorial/codes – Demo

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

Tutorial/codes – Demo

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 )

Tutorial/codes – Demo

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

Tutorial/codes – Demo

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.

Tutorial/codes – Demo

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.

Tutorial/codes – Demo

Author: raykuo
Created: AUGUST 01, 2017
Made with: HTML, CSS
Tags: animationCSSCSS Thumbnailsimagethumbnails
Previous Post

40 CSS Slideshows

Next Post

19 Free CSS Breadcrumbs Templates for Your Website

Related Stories

Animated Fullscreen and grid view Slider
Media

Animated Fullscreen and grid view Slider

July 8, 2020
Unicycle Range Slider
Media

Unicycle Range Slider

July 7, 2020
CSS Sliders
Media

15 CSS Sliders

June 27, 2020
10 CSS Logo Designs
Media

10 CSS Logo Designs

May 11, 2020
CSS Advent Calendar
Media

CSS Advent Calendar

December 24, 2019
HTML Audio Player
Media

HTML Audio Player

December 10, 2019
Realistic 3D Photo Card Gallery
Media

Realistic 3D Photo Card Gallery

November 27, 2019
49 CSS Tables
Media

49 CSS Tables

November 13, 2019

Discussion about this post

Follow Us

Popular Posts

100 Creative CSS Cards

44 Free Multi step HTML forms

13 Free HTML & CSS Dashboard Template Designs

49 CSS Tables

20 HTML & CSS pricing tables

14 Best CSS Dark Mode

11 CSS Shopping Cart UI/UX

42 Cool CSS Avatars For Better UI

55 Useful handpicked CSS Buttons with examples and demos

89 Best CSS Toggle Switches

w3tweaks

We bring you the best frontend collections that will fix perfect for news, magazine, personal blog, etc. Check our landing page for details.

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Script
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools