Fancy CSS Thumbnails | Bypeople

deals

premiumpacks & fancy css thumbnails (16 items)

Demos and snippets of elegant CSS thumbnails in multiple styles.

freebies

Based on a pen that displayed a single hexagon with an image, Josh Howenstine decided to take the concept and expand it completely by creating...

Based on a pen that displayed a single hexagon with an image, Josh Howenstine decided to take the concept and expand it completely by creating this classy set of images. When hovering over the elements, a transparent overlay comes up along with customized titles.

This code snippet, styled with pure CSS, features an image grid with titles and blur on top, moving the mouse over the picture will make it visible...

This code snippet, styled with pure CSS, features an image grid with titles and blur on top, moving the mouse over the picture will make it visible and scale, overlapping its neighboring elements. Despite the amount of effects, its performance is remarkably fluid.

This project consists of a set of images that include an informative card right behind them, When the user hovers the mouse over the pictures, an a...

This project consists of a set of images that include an informative card right behind them, When the user hovers the mouse over the pictures, an animation is triggered and the hidden card goes on top of the photo. As soon as the mouse if removed, both elements animate back to the original position. The card features nice CSS transparencies and styling.

Lifetime Prototyping & Wireframing Software Access, Only $29: Drag & Drop Interface, 100+ Nestable, Functional & Scriptable Components, Mockup For ...

Lifetime Prototyping & Wireframing Software Access, Only $29: Drag & Drop Interface, 100+ Nestable, Functional & Scriptable Components, Mockup For Any Mobile Device, Collaborative Projects, 5 Users Plan, Full Component Customization & Styling, Advanced Mobile Events & Much More

Here we have a set of elements similar to closed airplane windows with content hidden underneath them. In order to "open the windows" and check wha...

Here we have a set of elements similar to closed airplane windows with content hidden underneath them. In order to "open the windows" and check what's behind them, the user merely needs to hover the mouse over them. This triggers a nice CSS animation that reveals the material. Created by CodePen's Ana Tudor.

This fantastic code snippet allows you to provide complete information about a product in a space-efficient way with the help of useful hover descr...

This fantastic code snippet allows you to provide complete information about a product in a space-efficient way with the help of useful hover descriptions. These mouseover effects can appear in different ways, modifying them via CSS. Plus, not only the overlay receives visual treatment since the item pictures are animated simultaneously.

A very simple gallery you can use to display your glorious superhero or non-superhero pictures without too much bling. The images contain a thin ma...

A very simple gallery you can use to display your glorious superhero or non-superhero pictures without too much bling. The images contain a thin margin along with a subtle shadow that brings them out of the background a little. All credit goes to Joe Richardson from CodePen.

Lifetime Bootstrap 4 Website Generator, Only $29: For Windows & Mac, Intuitive Interface, 500+ Pre-made Content Blocks, 180+ Prototype Templates, 3...

Lifetime Bootstrap 4 Website Generator, Only $29: For Windows & Mac, Intuitive Interface, 500+ Pre-made Content Blocks, 180+ Prototype Templates, 30+ Nav Panels, Export .HTML Bootstrap 4 Native Code, Google PageSpeed Insights Tested!

Display a compact, good-looking avatar badge containing a surprise behind it. When hovering the cursor over it, the image is repositioned to the le...

Display a compact, good-looking avatar badge containing a surprise behind it. When hovering the cursor over it, the image is repositioned to the left, giving space to a set of hidden buttons underneath which can link visitors to other social networks, for example. Uploaded to CSSDeck by user maebert.

A classy Spotify list that displays artists through a neatly organized grid of album-like images. When hovering, a Spotify logo creeps from behind ...

A classy Spotify list that displays artists through a neatly organized grid of album-like images. When hovering, a Spotify logo creeps from behind the picture, simulating the vinyl coming out of the cover. Everything you see was styled with CSS by CodePen user Joacim Nilsson.

This slideshow provides a wonderful way to display up to four pictures in a dynamic fashion. The user is presented with a circular image and four l...

This slideshow provides a wonderful way to display up to four pictures in a dynamic fashion. The user is presented with a circular image and four little dots next to it, whenever another one is selected, the slideshow animates in different ways depending on the position of the next photo.

195 Vector T-Shirt Designs, Only $19! Editable Texts, Ai, EPS, PSD, SVG Vector File Formats, Extended License!

195 Vector T-Shirt Designs, Only $19! Editable Texts, Ai, EPS, PSD, SVG Vector File Formats, Extended License!

Here is a way to create a shadow effect that makes a set of boxes look as if they were curled around the corners, resulting in a sharp 3D effect. A...

Here is a way to create a shadow effect that makes a set of boxes look as if they were curled around the corners, resulting in a sharp 3D effect. Also, another shadow goes active on mouseover, highlighting the box. Created by JSFiddle user Chase Woodford.

An uncomplicated group of stacked images that expose themselves on mouseover with a delicate animation, applied with CSS3. It is recommended to use...

An uncomplicated group of stacked images that expose themselves on mouseover with a delicate animation, applied with CSS3. It is recommended to use pictures with the same size in order to achieve the correct result. It is explained in depth at Dudley Storey's website, who is the author of the project.

An elegant group of elements displaying a picture and some information right below it. When users hover on top of the design, a stylish animation i...

An elegant group of elements displaying a picture and some information right below it. When users hover on top of the design, a stylish animation is activated, covering all the space and providing deeper info to the visitor. All credit for this attractive pen goes to Ren Walker.

Beginner To Advanced Adobe InDesign Course, Only $17: Over 10 Hours Of Content, 80+ Videos, Certificate Of Completion, Clear English Pronunciation,...

Beginner To Advanced Adobe InDesign Course, Only $17: Over 10 Hours Of Content, 80+ Videos, Certificate Of Completion, Clear English Pronunciation, Subtitles In English & Chinese, Beginner To Advanced Levels

This impressive project creates a set of circular thumbnails and places them in the middle of the page; when moving the cursor over them, they slow...

This impressive project creates a set of circular thumbnails and places them in the middle of the page; when moving the cursor over them, they slowly go from round to square (seeing the corners transitions is immensely pleasing), growing in size and displaying another box with additional information. Perfectly designed in pure CSS by Pavel Burov.

This very simple project applies a margin to any thumbnail we are working with. Additionally, the margin leaves a bigger space down in the bottom i...

This very simple project applies a margin to any thumbnail we are working with. Additionally, the margin leaves a bigger space down in the bottom in order to input any custom captions you desire. The color palette is a little off, but as you know with CodePen, you can modify the code anytime.

This project takes advantage of CSS3 transitions in order to give these images more complexity in their functionality, turning them into box UIs wi...

This project takes advantage of CSS3 transitions in order to give these images more complexity in their functionality, turning them into box UIs with interesting hover effects. After a nice fade, the boxes now include captions and clickable elements where the visitor can get more information.

1500+ Infographic Templates, PPT, PPTX, KEY, PSD, EPS & Ai Files, 25k+ Individual Elements, Perfect For Any Industry, From Social Media & Marketing...

1500+ Infographic Templates, PPT, PPTX, KEY, PSD, EPS & Ai Files, 25k+ Individual Elements, Perfect For Any Industry, From Social Media & Marketing to Medical & Education, Only $29!

This thumbnail-based design intends to recreate a Dribbble shot that displays a music slider. In this attempt, you need to move the cursor over the...

This thumbnail-based design intends to recreate a Dribbble shot that displays a music slider. In this attempt, you need to move the cursor over the images in order to see a collection of covers from artists included in the playlist appear in quick succession. Created by CodePen user Duncan McDougall.