A Collection of 30 css image gallery with thumbnails code examples.
1.CSS IMAGE HOVER EFFECTS
Trying out hover effects.
Made with
Html
Css/SCSS
Javascript
Author
Abubaker Saeed
Demo
2.CSS THUMBNAIL HOVER EFFECTS
Made with
Html
Css/SCSS
Javascript
Author
Aybüke Ceylan
Demo
3.RESPOPNSIVE IMAGES WITH THUMBNAILS
Made with
Html
Css/SCSS
Javascript
Author
Raymond
Demo
4.THUMBNAIL HOVER INTERACTION
Pure CSS thumbnail hover interaction.
Made with
Html
Css/SCSS
Javascript
Author
Sikriti Dakua
Demo
5.CSS THUMBNAIL TEXT HOVER
Made with
Html
Css/SCSS
Javascript
Author
Rajesh Bhattarai
Demo
6.SPLIT IMAGE THUMBNAIL
Split thumbnail image on hover in HTML and CSS.
Made with
Html
Css/SCSS
Javascript
Author
YJ
Demo
7.CSS THUMBNAIL TRANSITION EFFECTS
Made with
Html
Css/SCSS
Javascript
Author
Javier Lopez
Demo
8.ANIMATED GALLERY THUMBNAILS
A fancy responsive CSS animated gallery thumbnails.
Made with
Html
Css/SCSS
Javascript
Author
Simto Alev
Demo
9.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
Javascript
Author
Nikhil Krishnan
Demo
10.FOTOBOOK ALBUM THUMBNAIL
Made with
Html
Css/SCSS
Javascript
Author
Hansford Nguyen
Demo
11.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
Css/SCSS
Javascript
Author
Scott Henderson
Demo
12.THUMBNAIL EFFECT
Image thumbnail hover effect.
Made with
Html
Css/SCSS
Javascript
Author
Amrit Pandey
Demo
13.THUMBNAIL HOVER
CSS thumbnail hover with caption and social buttons.
Made with
Html
Css/SCSS
Javascript
Author
Amol V Bharambe
Demo
14.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
Javascript
Author
Aysha Anggraini
Demo
15.FLEX- THUMBNAILS
CSS flexbox thumbnail arrangements.
Made with
Html
Css/SCSS
Javascript
Author
NaveenBhaskar
Demo
16.CSS RESPONSIVE THUMBNAIL
CSS Thumbnail responsive flexbox hover transition.
Made with
Html
Css/SCSS
Javascript
Author
raykuo
Demo
17.CSS THUMBNAIL
Thumbnail CSS hover transition.
Made with
Html
Css/SCSS
Javascript
Author
raykuo
Demo
18.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
Author
Greg Sweet
Demo
19.THUMBNAIL HOVER
Angled thumbnail hover interaction.
Made with
Html
Css/SCSS
Javascript
Author
Nathan Long
Demo
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.
Made with
Html
Css/SCSS
Javascript
Author
Anselm Urban
Demo
21.ARTIST RADIO THUMBNAILS
Recreation of Spotify artist radio thumbnails.
Made with
Html
Css/SCSS
Javascript
Author
Alan Shortis
Demo
22.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
Javascript
Author
Hitz Kareaga
Demo
23.PURE CSS THUMBNAIL HOVER EFFECT
Thumbnail hover effect with CSS3.
Made with
Html
Css/SCSS
Javascript
Author
Aysha Anggraini
Demo
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.
Made with
Html
Css/SCSS
Javascript
Author
Pavel Burov
Demo
25.FLIPPING THUMBNAILS
Flipping thumbnails in HTML, CSS and JavaScript.
Made with
Html
Css/SCSS
Javascript
Author
Christophe Béghin
Demo
26.Advanced CSS image Gallery
Made with
Html
Css/SCSS
Javascript
Author
David Tintner
Demo
27.Image hover styles (overlay) pure CSS
Made with
Html
Css/SCSS
Javascript
Author
Evochrome
Demo
28.Simple CSS Image Gallery
Responsive interactive image gallery! Click over the image to view the effect!
Made with
Html
Css/SCSS
Javascript
Author
codeconvey
Demo
29.Responsive Image Gallery
This is a simple HTML + Pure CSS image gallery that target each image to a unique url.
Made with
Html
Css/SCSS
Javascript
Author
Alexandre CMC Souza
Demo
30.3D CSS Image Gallery
Made with
Html
Css/SCSS
Javascript
Author
Muhammed Fathi
Demo
