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 Access: 40,000+ Stock Video Footage, High Definition 1080px, MP4 Files, 150+ Categories, 75 New Videos Each Month, Commercial Use!

Lifetime Access: 40,000+ Stock Video Footage, High Definition 1080px, MP4 Files, 150+ Categories, 75 New Videos Each Month, Commercial Use!

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 Access: Social Media Management Tool. Feature Rich Platform With Unlimited Social Media Profiles & Projects At No Extra Cost. Pay Once, Us...

Lifetime Access: Social Media Management Tool. Feature Rich Platform With Unlimited Social Media Profiles & Projects At No Extra Cost. Pay Once, Use Forever!

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.

Exclusive Deal LStore Graphics: Smart UI/UX Design System, UI Kits & Templates For Sketch & Photoshop

Exclusive Deal LStore Graphics: Smart UI/UX Design System, UI Kits & Templates For Sketch & Photoshop

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.

68 Fonts Bundle, 9+ Design Styles, Several Weights with Variations and Swashes, Extended License, only 7$! (98% Off)

68 Fonts Bundle, 9+ Design Styles, Several Weights with Variations and Swashes, Extended License, only 7$! (98% Off)

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.

40 Premium WordPress Plugins to Revamp Your Website! SEO Optimizing, Campaign Management, Quality Leads Generation & Capture, Page Building, Social...

40 Premium WordPress Plugins to Revamp Your Website! SEO Optimizing, Campaign Management, Quality Leads Generation & Capture, Page Building, Social Conversion Boosting, Mobile Optimizing, Browser Graphical Editors, Opt-In Content Delivery, and so much more! Only 19$!

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.