40+ CSS Thumbnails - Free Code + Demos
Collection of 40+ CSS Thumbnails. All items are 100% free and open-source.
1. CSS Image Hover Effects
Trying out hover effects. Note: if these were cards and contains links I'd have created focus styles as well :)
Author: Abubaker Saeed (AbubakerSaeed)
Links: Source Code / Demo
Created on: April 27, 2020
Made with: HTML, CSS, JS
Tags: css, hover, effects, cpc-image-hovers, codepenchallenge
2. CSS Image Hover Effects
Author: Aybüke Ceylan (aybukeceylan)
Links: Source Code / Demo
Created on: April 22, 2020
Made with: HTML, SCSS
Tags: image, hover, cpc-image-hovers, codepenchallange
3. Responsive Images With Thumbnails
Author: Raymond (rymnd_rbg)
Links: Source Code / Demo
Created on: April 15, 2020
Made with: HTML, CSS
Tags: cpc-art-direct-image, codepenchallenge
4. Card Hover Interaction | HTML & CSS
Background Position is a bit jerky to animate. I think it would be better to use instead of animating background-position I would love to see a fork.
Author: Sikriti Dakua (dev_loop)
Links: Source Code / Demo
Created on: March 31, 2020
Made with: HTML, SCSS
5. CSS Thumbnail Text Hover
Author: Rajesh Bhattarai (rajeshuiux)
Links: Source Code / Demo
Created on: September 11, 2019
Made with: HTML, CSS
6. Split Image On Hover
Author: YJ (John_Tsai)
Links: Source Code / Demo
Created on: January 2, 2019
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
7. CSS Thumbnail Transition Effects
Author: Javier Lopez (javierlopez)
Links: Source Code / Demo
Created on: December 6, 2018
Made with: HTML, CSS
8. Animated Gallery Thumbnails
Author: Simto Alev (simtoalev)
Links: Source Code / Demo
Created on: October 5, 2018
Made with: HTML, SCSS, JS
Tags: pure-css, gallery, thumbnail, animation, animated
9. THUMBNAIL HOVER EFFECTS
Pure CSS3 image thumbnail hover effects, also we can easily change the grid item per row using by sass variable.
Author: Nikhil Krishnan (nikhil8krishnan)
Links: Source Code / Demo
Created on: July 6, 2018
Made with: HTML, SCSS
Tags: css3, hover, thumbnail, hover-effects, sass
10. Fotobook Album Thumbnail
Author: Hansford Nguyen (hansfordnguyen)
Links: Source Code / Demo
Created on: June 10, 2018
Made with: Haml, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
11. Document Thumbnail With Dog-ear Via 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 le...Read More
Author: Scott Henderson (scootman)
Links: Source Code / Demo
Created on: November 9, 2017
Made with: Slim, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Slim
Tags: css custom properties, dog-ear
12. Image Thumbnail Hover Effect
Author: Amrit Pandey (amritpandey)
Links: Source Code / Demo
Created on: November 8, 2017
Made with: HTML, CSS
13. Thumbnail Hover 1
Author: AmolB (AmolVBharambe)
Links: Source Code / Demo
Created on: November 1, 2017
Made with: HTML, CSS
Tags: card, ui card, hover-animation, ui grid, thumbnail
14. Thumbnail Presentation With CSS Grid
This was fun to make. Again, it is inspired by Polygon's (polygon.com) bevel treatment on their thumbnails. I decided to take a step further and go crazy with it and at the same time playing with CSS Grid. This should work with older browsers as far as IE9. Older browsers and non-supportin...Read More
Author: Aysha Anggraini (rrenula)
Links: Source Code / Demo
Created on: September 29, 2017
Made with: HTML, SCSS
Tags: css-grid, thumbnail, layout, grid
15. Flex- Thumbnails
Author: NaveenBhaskar (naveenbhaskar)
Links: Source Code / Demo
Created on: August 30, 2017
Made with: HTML, SCSS
16. CSS Thumbnail Responsive Flexbox Hover Transition
A quick pen to play around with flexbox hover transition.
Author: raykuo (raykuo)
Links: Source Code / Demo
Created on: July 31, 2017
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css, animation, transition, scss, flexbox
17. Thumbnail CSS Hover Transition
Author: raykuo (raykuo)
Links: Source Code / Demo
Created on: July 10, 2017
Made with: Pug, CSS
CSS Pre-processor: None
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css, animation, transition, css-animation, ux
18. Flexbox YouTube Thumbnail Grid
Responsive flexbox unordered list grid of YouTube video thumbnails with Fancybox links.
Author: Greg Sweet (ControlledChaos)
Links: Source Code / Demo
Created on: November 6, 2016
Made with: HTML, SCSS
Tags: flexbox, fancybox, responsive, grid, video
19. Angled Thumbnail Hover Interaction
Replicating the thumbnail treatment from https://stupid-studio.com/.
Author: Nathan Long (nathanlong)
Links: Source Code / Demo, Stupid-studio.com
Created on: September 23, 2016
Made with: HTML, SCSS
Tags: thumbnail, hover, angle, gallery
20. 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.
Author: Anselm Urban (a-urban)
Links: Source Code / Demo
Created on: August 15, 2016
Made with: HTML, CSS
Tags: thumbnail, hover, css, effect, animation
21. Spotify Artist Radio Thumbnails
Recreation of Spotify artist radio thumbnails
Author: Alan Shortis (alanshortis)
Links: Source Code / Demo
Created on: May 8, 2016
Made with: HTML, SCSS, JS
22. Pure CSS Perfect Square Thumbnails Gallery
A responsive image gallery using pure CSS with a centered button on the hover and centered and cropped thumbnails.
Author: Hitz Kareaga (hitzkareaga)
Links: Source Code / Demo
Created on: November 30, 2015
Made with: HTML, SCSS
Tags: square thumbnails, thumbnails gallery, pure-css, responsive image gallery, button on hover
23. Pure CSS Thumbnail Hover Effect
This was inspired by an old blog post of Sohtanaka. He had created a similar effect using jQuery. I decided to replicate the same effect with CSS3. My 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 t...Read More
Author: Aysha Anggraini (rrenula)
Links: Source Code / Demo
Created on: November 21, 2013
Made with: HTML, CSS
Tags: hover-effect, css3, thumbnail
24. 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.
Author: Pavel Burov (pmburov)
Links: Source Code / Demo
Created on: April 7, 2013
Made with: HTML, SCSS
Tags: css3, transitions
25. Flipping Thumbnails
Author: Christophe Béghin (CBeghin)
Links: Source Code / Demo
Created on: February 19, 2013
Made with: HTML, CSS, JS
Tags: rotate, blur, webkit, css3
26. Animated CSS Thumbnail Gallery
Author: Jason (almightythud)
Links: Source Code / Demo
Created on: October 26, 2018
Made with: HTML, SCSS
27. 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.
Author: SitePoint (SitePoint)
Links: Source Code / Demo
Created on: August 22, 2016
Made with: HTML, CSS
Tags: thumbnail, hover, css, effect, animation
28. Responsive Thumbnail Box
Thumbnail: 2:3 = 100%:66.67% Forked from redfrost's Pen Responsive Thumbnail Box.
Author: mahsum (alyanak)
Links: Source Code / Demo
Created on: September 27, 2015
Made with: HTML, CSS, JS
29. Basic Thumbnail Gallery Using Bootstrap And CSS Transitions
Author: Will Polliard (willpolliard)
Links: Source Code / Demo
Created on: July 16, 2016
Made with: HTML, CSS, JS
30. Minimal Responsive Thumbnail Gallery (Grid & Masonry)
Responsive gallery thumbnails with support for Grid and Masonry layouts. Minimal HTML and CSS only utilizing Flexbox.
Author: Akin Bilgic (AkinBilgic)
Links: Source Code / Demo
Created on: July 24, 2019
Made with: HTML, CSS
Tags: gallery, thumbnails, grid, masonry, flexbox
31. Clickable Gallery Tiles.
Author: Will H McMahan (whmii)
Links: Source Code / Demo
Created on: January 26, 2016
Made with: HTML, SCSS, JS
Tags: css, shadows, gallery, thumbnails
32. Hover Idea
An idea for using transformations on hover. Uses a mixin for using fixed ratios for responsive elements.
Author: auginator (auginator)
Links: Source Code / Demo
Created on: April 29, 2015
Made with: HTML, SCSS
Tags: hover, thumbnails, transforms
33. Carousel Gallery With Thumbnails And Touch Control Inside Modal Popup Using Bootstrap And JQuery
Carousel Gallery with Thumbnails inside Modal Popup using Bootstrap and jQuery. Instead of indicator dots we are using thumbnails.
Author: ali sinan (alisinan)
Links: Source Code / Demo
Created on: October 13, 2017
Made with: HTML, SCSS, JS
Tags: carousel, gallery, portfolio, modal, popup
34. Image Gallery (Bootstrap 4 + Magnific Popup)
Author: Kush (kushfels)
Links: Source Code / Demo
Created on: February 5, 2020
Made with: HTML, CSS, JS
Tags: bootstrap 4, magnific popup, image-gallery
35. A Better Responsive Image Gallery With Flexbox
More details on my blog
Author: Dudley Storey (dudleystorey)
Links: Source Code / Demo
Created on: June 22, 2014
Made with: HTML, CSS
Tags: flexbox, gallery, images, grid, rwd
36. CSS Grid Deserts
Playing around with CSS Grid in responsive image galleries. Can you tell what I was craving when I made this?.....
Author: Stephanie (ramenhog)
Links: Source Code / Demo
Made with: HTML, SCSS
37. Thumbnails With Captions Style
Author: Dima Hijazi (dima_hijazi)
Links: Source Code / Demo
Created on: September 28, 2014
Made with: HTML, CSS
Tags: thumbnails
38. Food Thumbnail Hover UI
A quick little dual transition of images on hover inside elements with border-radius. Includes a fade-in caption. Webkit transition clipping problem is addressed with an "invisible" border.
Author: Dudley Storey (dudleystorey)
Links: Source Code / Demo
Created on: February 8, 2014
Made with: HTML, CSS
Tags: images, thumbnails, caption, transitions
More Awesome Lists:
Share: