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

View Code

Thumbnail Hover

Angled thumbnail hover interaction.

Made with: HTML,CSS (SCSS)

View Code

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

View Code

Artist Radio Thumbnails

Recreation of Spotify artist radio thumbnails.

Made with: HTML,CSS (SCSS)

View Code

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)

View Code

Pure Css Thumbnail Hover Effect

Thumbnail hover effect with CSS3.

Made with: HTML,CSS

View Code

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)

View Code

Flipping Thumbnails

Flipping thumbnails in HTML, CSS and JavaScript.

Made with: HTML,CSS,JavaScript

View Code