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.
ANIMATED GALLERY THUMBNAILS
A fancy responsive CSS animated gallery thumbnails. Made with HTML / CSS (SCSS) by Simto Alev.
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.
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.
Image thumbnail hover effect. Made with HTML / CSS by Amrit Pandey.
CSS thumbnail hover with caption and social buttons. Made with HTML / CSS by Amol V Bharambe.
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.
CSS flexbox thumbnail arrangements. Made with HTML / CSS (SCSS) by NaveenBhaskar.
CSS RESPONSIVE THUMBNAIL
CSS Thumbnail responsive flexbox hover transition. Made with HTML (Pug) / CSS (SCSS) byraykuo.
Thumbnail CSS hover transition. Made with HTML (Pug) / CSS by raykuo.
FLEXBOX YOUTUBE THUMBNAIL GRID
Angled thumbnail hover interaction. Made with HTML / CSS (SCSS) by Nathan Long.
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.
ARTIST RADIO THUMBNAILS
Recreation of Spotify artist radio thumbnails. Made with HTML / CSS (SCSS) by Alan Shortis.
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.
PURE CSS THUMBNAIL HOVER EFFECT
Thumbnail hover effect with CSS3. Made with HTML / CSS by Aysha Anggraini.
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.