Top 19 CSS Thumbnails

Collection of free HTML and CSS image thumbnail code examples.

SPLIT IMAGE THUMBNAIL

Split thumbnail image on hover in HTML and CSS.  Made with HTML (Pug) / CSS (Sass) by YJ.

See the Pen
Split Image on hover
by YJ (@John_Tsai)
on CodePen.

Demo and Download

ANIMATED GALLERY THUMBNAILS

A fancy responsive CSS animated gallery thumbnails. Made with HTML / CSS (SCSS) by Simto Alev.

See the Pen
A Fancy CSS Animated Gallery Covers (Now Responsive)
by Simto Alev (@simtoalev)
on CodePen.

Demo and Download

THUMBNAIL HOVER EFFECTS

Pure CSS3 image thumbnail hover effects, also we can easily change the grid item per row using by Sass variable. Made with HTML / CSS (SCSS) by Nikhil Krishnan.

See the Pen
THUMBNAIL HOVER EFFECTS
by Nikhil Krishnan (@nikhil8krishnan)
on CodePen.

Demo and Download

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. Made with HTML (Slim) / CSS (SCSS) by Scott Henderson.

See the Pen
Document thumbnail with dog-ear via CSS custom property
by Scott Henderson (@scootman)
on CodePen.

Demo and Download

THUMBNAIL EFFECT

Image thumbnail hover effect. Made with HTML / CSS by Amrit Pandey.

See the Pen
Image Thumbnail Hover Effect
by Amrit Pandey (@amritpandey)
on CodePen.

Demo and Download

THUMBNAIL HOVER

CSS thumbnail hover with caption and social buttons. Made with HTML / CSS by Amol V Bharambe.

See the Pen
Thumbnail Hover 1
by AmolB (@AmolVBharambe)
on CodePen.

Demo and Download

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. Made with HTML / CSS (SCSS) by Aysha Anggraini.

See the Pen
Thumbnail Presentation with CSS Grid
by Aysha Anggraini (@rrenula)
on CodePen.

Demo and Download

FLEX- THUMBNAILS

CSS flexbox thumbnail arrangements. Made with HTML / CSS (SCSS) by NaveenBhaskar.

See the Pen
flex- thumbnails
by NaveenBhaskar (@naveenbhaskar)
on CodePen.

Demo and Download

CSS RESPONSIVE THUMBNAIL

CSS Thumbnail responsive flexbox hover transition. Made with HTML (Pug) / CSS (SCSS) byraykuo.

See the Pen
CSS Thumbnail responsive flexbox hover transition
by raykuo (@raykuo)
on CodePen.

Demo and Download

CSS THUMBNAIL

Thumbnail CSS hover transition. Made with HTML (Pug) / CSS by raykuo.

See the Pen
Thumbnail CSS hover transition
by raykuo (@raykuo)
on CodePen.

Demo and Download

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. Made with HTML / CSS (SCSS) / JavaScript by Greg Sweet.

See the Pen
Flexbox YouTube Thumbnail Grid
by Greg Sweet (@ControlledChaos)
on CodePen.

Demo and Download

THUMBNAIL HOVER

Angled thumbnail hover interaction. Made with HTML / CSS (SCSS) by Nathan Long.

See the Pen
Angled Thumbnail Hover Interaction
by Nathan Long (@nathanlong)
on CodePen.

Demo and Download

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. Made with HTML / CSS by Anselm Urban.

See the Pen
Thumbnail with Animated Captions
by Anselm Urban (@a-urban)
on CodePen.

Demo and Download

ARTIST RADIO THUMBNAILS

Recreation of Spotify artist radio thumbnails. Made with HTML / CSS (SCSS) by Alan Shortis.

See the Pen
Spotify Artist Radio Thumbnails
by Alan Shortis (@alanshortis)
on CodePen.

Demo and Download

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. Made with HTML / CSS (SCSS) by Hitz Kareaga.

See the Pen
Pure CSS perfect square thumbnails gallery
by Hitz Kareaga (@hitzkareaga)
on CodePen.

Demo and Download

PURE CSS THUMBNAIL HOVER EFFECT

Thumbnail hover effect with CSS3. Made with HTML / CSS by Aysha Anggraini.

See the Pen
Pure CSS Thumbnail Hover Effect
by Aysha Anggraini (@rrenula)
on CodePen.

Demo and Download

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. Made with HTML / CSS (SCSS) by Pavel Burov.

See the Pen
Rounded thumbnails portfolio
by Pavel Burov (@pmburov)
on CodePen.

Demo and Download

FLIPPING THUMBNAILS

Flipping thumbnails in HTML, CSS and JavaScript by Christophe Beghin.

See the Pen
Flipping thumbnails
by Christophe Béghin (@CBeghin)
on CodePen.

Demo and Download

Praveen Kumar

I am a fullstack web developer with a passion for SEO, creating stunning websites, and organic marketing. I am a perfectionist.

Post navigation