• CSS Animations (52 submissions)

      CSS animations put together for the most part in code Playgrounds.

      • Wenk: Lightweight CSS Tooltip

        Wenk is a Lightweight tooltip written in pure CSS using PostCSS. The minified version is 712 bytes when gzipped. It can easily be styled using data attributes or classes. The tooltip will adjust to fit the content.

      • Choreographer-js: Simple CSS Animations

        A simple library to take care of complex CSS animations. It can also add custom functions that do non-CSS animations. To use it simply install the package via npm or include the file as a script.

      • Background Segment Effect: CSS Motion Animati...

        The Background Segment Effect is an animation done with the CSS clip-path property and powered by anime.js. The effect replicates boxes from a background and makes these boxes move in perspective towards the viewer.

      • Spinners: Loading Icons Animations

        Spinners is a collection of HTML and CSS animations for loading icons to show that is some content loading. All you have to do to use it is copy the Spinner's HTML and CSS code and paste it into your project.

      • CSS 3D Marquee Text Wrapping

        This a CSS 3D effect for text, it wraps the text with an animation around a box. It has the option to customize the color, font family, shadows and the speed at which the text moves.

      • SpinThatShit: CSS Loaders

        This is a set of SCSS mixins for single element loaders and spinners. There are 12 examples, all you have to do is clone or download the repo and include the source folder to your project.

      • Fancy SVG Letter Animation.

        A curious & experimental SVG letter animation tutorial based on the Dribbble shot "Shading Letters in Illustrator" by Jake Bartlett. Powered by Julian Garnier's anime.js. Crafted in HTML and styling added using CSS.

      • You-Dont-Need-Javascript: Do Things Without J...

        A library of CSS demos that you can use as an alternative to JavaScript. It includes toggles, carousels, games, menus, animations and others, it includes the option to try the demos included in the page.

      • Devices SVG & JS Animation

        A transitional animation that showcases a variety of famous devices changing shapes within one another. Utilizes SVG resources and JS for the animation.

      • Login/Logout Animation Concept

        This snippet showcases a mainly couple of animations, one for the login another for the logout. It also has animations for the buttons and the transitions, alongside a well-crafted login form.

      • Shopping Cart Interaction Snippet

        This snippet utilizes a marketplace template as starting point in order to showcase the animation for the addition of an item to the cart.

      • Snippet – Responsive Navigation Ideas

        Showcase of menu deploys animations within devices mockups, mainly build using CSS, HTML and a little of JS. The mockups are modeled after iOS devices and the animations of the menu button change from an example to another.

      • Bouncy Ball: Animation Techniques Comparison

        This useful snippet-based web page presents a bouncy ball animation written in different techniques, allowing the users to compare the code structure within the multiple preprocessors, frameworks, as well as pure CSS.

      • Yoshi’s Island Parallax Slider

        A stunning slider that features Yoshi´s Island and uses a parallax effect to move through four different environments before reaching the final destination. It was made with Flickity, is full of colorful plants, animals and much more.

      • Slightly Animated CSS Profile Box

        A beautifully crafted profile box developed and animated in pure CSS placed on top of a JavaScript animated particles background.

      • JavaScript Tearable Cloth Simulation

        A fantastic and interactive simulation where a cloth can be torn apart with the mouse pointer. Crafted in JavaScript.

      • CSS & JS Peeling Gift Box

        A beautifully crafted usage example for legomushroom's paper peel effect that features animations for SVG illustrations emulating the exciting sensation of peeling of a gift box.

      • Funny Icons: Pure CSS Built & Animated I...

        An amazing set of 12 blob style icons neatly created and animated in pure CSS.

      • Slide Animated Sidebar Menu

        A very appealing sidebar menu that counts on slide-animated elements that represent the page that they'll show, the content of each page is also animated with sliding effects making everything nice and coherent.

      • SVG Clip-path Hover Effect

        Hover effect using SVG and CSS transitions with a circular frame sneak peek clip-path showing up some beautiful and dark illustrations.

      • CSS 3D Solar System Animation

        Beautiful solar system CSS animation in 3D front view and 2D side view, zoom in, switchable between speed, size and distance mode for every planet.

      • Touch Device Jelly Menu

        This fun and delicious Codepen is a menu concept with a bouncing jelly scroll effect, items divided by color scheme, flat food icons and a nice click popping effect.

      • Direction-aware 3D Hover Effect

        Basic and smooth 3D hover effect made with CSS and a little bit of JS, a direction sensitive cube that flips from the direction of the cursor to the center.

      • CSS Parallax Orbs

        CSS flat design animation within a circular shape, all three of them are travel related featuring parallax movement, fade in text and a smooth zoom in.

      • Build 3D Transforms Without Code

        An online tool offered by Webflow framework that allows you to apply 3D transforms for moving, rotating, and applying perspective to web elements requiring no code at all.

      • CSS Menu Inspiration: Animated Lines

        CSS animated menu with interactive, colorful lines, smooth slide, fade in and pop up effects perfectly suitable to style navigation bars.

      • JavaScript Animated CSS Ribbon

        A neatly crafted animation in pure JavaScript for animating a smooth and nicely crafted CSS ribbon rising up from bottom to top.

      • A CSS & jQuery Animated Background

        A snippet for generating particle-based animations quite suitable for header or featured content background.

      • Elastic Pull To Refresh Concept

        An elastic pull effect for reloading feed in mobiles or touch-capable device interfaces.

      • GSAP Animated SVG Clock

        An animated vector-based digital clock that features really nice up-popping effects crafted by Icebob who used GSAP for the animation.

      • CSS & JavaScript Animations and Transiti...

        A library made in CSS and JavaScript for animating elements and creating cool transitions between blocks. It can be used in different situations for enhancing the appearance of your website or navigate between pages mobile applications. This plugin is licensed under MIT.

      • CSS3 Magical Animations

        A set of magical animations for design elements like buttons or static images. This uses CSS only, and the animations include out effects, perspective, rotate, slide, math, bomb, boing and off the space. The code is licensed under MIT

      • iconate.js: Icon Animations JavaScript and CS...

        iconate.js is an animation library for icons made in JavaScript and CSS, allowing to transform one icon into other. It uses Font Awesome icons, but it also can use Glyphicons. It was made by Jignesh Kakadiya.

      • AniCollection: Online CSS3 Animations Collect...

        AniCollection is an online set of animations made in CSS3. They work for multiple purposes like focus the attention of the user, entrances, exists, fading effects, flippers, rotations, sliding effects and more. The effects can be saved and then downloaded in a bundle in CSS, HTML, jQuery or AniJS.

      • Wave Animated CSS Ribbon

        Quite an impressive SCSS ribbon animated with smooth sliding and fading in transitions at different times.

      • Animated Ribbon Logo

        A nicely crafted JavaScript animation that gives your ribbon-featured logos quite a lot of life and action by loading and fading in bit by bit.

      • CSS & Canvas Loader

        A beautiful loader made with CSS and Canvas. It is full of little squares flowing through space. The cursor is replaced by a focal light that creates shadows from the squares. It is a compelling code snippet that can entertain people while a page loads, or it can work as the base of a game. It was created by Mladen Stanojevic.

      • CSS-based Content Blocks Animation

        A set of animations made with CSS and a bit of JS applied to content boxes. It uses CSS transforms and animations to organize the content boxes, allowing you to add more of them. They can be used in a blog or online magazine. This snippet was created by Monir Abu Hilal.

      • Pure CSS Checkbox Animation

        A gorgeous animation made in pure CSS for animating checkboxes. Once a checkbox is clicked, it gets illuminated and a check mark appears, and also the text changes its color to let the user know it is selected. This snippet was created by Dylan Raga.

      • Animatic: CSS Animations JavaScript Library

        A simple plugin for animating all kinds of elements at a time. It uses CSS transforms and 3d-transforms along with Javascript to create animations. It weighs 5k gzipped, it's free and it was created by Yehor Lvivski.

      • Animated CSS Business Card Mockup

        A business card made with pure CSS transitions that animates when you hover over. At first, it shows the logo and the basic information (name and occupation). When hovered over, the card displays the social and contact information, like phone number, website and Twitter account. It was made by M. Alex Junaedi.

      • StackSlider: CSS 3D Image Slider

        A compelling image slider made with CSS composed of two stacks of cards from which images get "picked up". This experimental slider uses CSS 3D transforms and perspective. This work in modern browsers perfectly, but still has some bugs.

      • Baraja: Card Spreading jQuery Plugin

        A beautiful set of CSS transforms and transitions compressed within a jQuery plugin that allows you to show stacks of cards in different ways. Among its effects, you can find fan right and left, rotated spread (horizontal and vertical), linear spread right and left, and many more. remember they only work in browsers that support transitions and transforms.

      • Animate.css: CSS Animations Library

        Animate.css is a collection of cool, fun, and cross-browser animations compiled in a library to use in your projects. They are great for emphasis, home pages, sliders, and general just-add-water-awesomeness. It allows you creating custom and lightweight animations to style different design elements of your site. This library was created by Dan Eden Tweet

      • Infinite Scrolling Background in HTML and CSS

        The Infinite Scrolling Background is an interesting concept of a background that never stops moving. If applied correctly, it can lead the user to think other elements are moving, like a starry sky and a rocket. This code snippet was created only with CSS and HTML, made and uploaded to Codepen by Scott Marshall.

      • CSS Holiday Card Animation

        A beautiful code snippet created with pure CSS for an animation that generates an attractive animated snow effect over an image that also has been created with CSS. It can be used in a website, a mobile app or an email to wish a happy holiday to the users.

      • Fancy CSS Mannequin

        ​This code snippet helps you create a mannequin that moves in different ways, made with pure CSS. It is set by default in the "Run" state, but it can kick, punch, march and jump as well. It can be used (preferably improved) in physical education or activities websites.

      • After-Effectsy CSS3 Transitions

        An awesome set of ten different transition effects created with CSS3 and activated on hover, perfect for applying them to images and/or icons. Their inactive states include overlays in circles and square shapes, in diverse variations. Created by ksk1015 and uploaded to CodePen by Joakim Wimmerstedt.

      • Animated CSS Coming Soon Page

        Chris Violette designed this coming soon placeholder page for one of his clients and decided to add a unique feature for visitors with modern browsers. After the graphics and layout were done, he added some keyframe animation to the body background image and the "burst" behind the logo. The background image is constantly moving, so it looks like the logo is moving. Also, it has a nice spinning effect.

      • Animated CSS3 Downloader

        LukyVj from CSSDeck has decided to apply a recently-found effect to this full-screen loader, with neat results. It shows three screens in total: A simple "download" button with a white background when inactive, switching to black on hover. Finally, when clicking on it, a spiralling couple of glowing arrows signify the start of the download.

      • CSS3 Box Shadow Transitions

        An amazing set of hover transitions created by Shinji Yonetsu. It contains everything you can think of: Masks, gradations, floating effect, slides, accordions and more. It even includes advanced effects for the most skilled developers or those wanting to create truly impressive designs.

      • 3D Thumbnail CSS Hover Effects

        A useful and complete Codrops tutorial is going to explain you an amazing set of techniques used to create appealing hover effects on a set of images. When touching the cursor, CSS 3D transforms are triggered, "bending" the image and revealing hidden information behind them.

      • Collapse Expand List View all items Download Collection Submit
    • CSS Tooltips (32 submissions)

      A compilation of beautifully designed CSS tooltips, integrating attractive looks with a useful variety of purposes and features.

      • Wenk: Lightweight CSS Tooltip

        Wenk is a Lightweight tooltip written in pure CSS using PostCSS. The minified version is 712 bytes when gzipped. It can easily be styled using data attributes or classes. The tooltip will adjust to fit the content.

      • jQuery & CSS Shortcut Help Tooltip

        A jQuery and CSS tooltip showing an initial button that activates a help menu when you click it. It can contain whatever you wish, although it is recommended for web guided tours and gameplay instructions. The pen was developed by Dario Corsi.

      • Qlocktwo: Multilanguage Snippet

        A very creative CSS, Javascript and HTML 5 snippet that allows showcasing time and seconds with a clock-like animation, it supports multiple languages and it comes in various colors.

      • Protip: CSS & jQuery Tooltip Plugin

        Protip is quite a flexible tooltip plugin for both CSS and jQuery that comes with lots of customizing features such as 49 positions, live refresh options, gravity, and more.

      • CSS3 & jQuery Tooltips Image Map

        A CSS3 & jQuery tooltips image map, tooltips can play a big role in your web designs, just use them correctly and they will help you improve user experience. We have seen before how to create some good looking CSS3 tooltips and today you'll learn how to create an image map with pins and tooltips.

      • Super Simple CSS Tooltips

        A simple CSS snippet which locates tooltips on different positions. You can locate them on any side (left, right, up and down), the code is really lightweight and can be implemented on any project, making the necessary adjustments. It is free and it was created by Ben Mildren.

      • Simple CSS tooltips

        This is a set of CSS tooltips that can be shown on the right, left, top and bottom of any element. The color of the tooltips can be changed quickly, and you can select different types of tooltip with simple attribute. This tooltips are animated and were created by Adobewordpress.

      • Hint: a Pure CSS Tooltip Library

        Hint is an attempt to make a mini tooltip library in pure CSS. It does the basic job but still has bugs and lacks some important features. However, is a nice experiment that allows you to show tooltips in any element's direction, so it integrates seamlessly with your website, blog or mobile app.

      • Blue Tooltip Emerging from Button

        This code snippet, created by Pete Nawara, is a button from which emerges a blue flat tooltip. It was created with the help of LESS and HTML, which you can modify to integrate on your website or blog.

      • iOS Web App Bookmark Reminder Bubble

        A bubble that reminds your iOS users to add your web app to their device home screen. It pops up right above bookmark button when the app is loaded. Once the user closes the bubble it stores a localStorage key so that it will not bug them again (unless they clear their browser data).

      • CSS Black Tooltips in Pure CSS

        Aniket has designed a kit of black tooltips in pure CSS using the :after and :before CSS pseudo classes. They are set to be displayed from any direction you want, and you can edit it to make them look better. This code was created by YSBDesign.

      • Black Bordered Tooltip Created with CSS

        The original author of the old version of this tooltip is Luis Almeida, who did the design of the tooltip. However, in this version you can see the tooltip arrow in the left (previously was at the top) with the same CSS style.

      • Share it: Tooltips and Buttons for Social Sha...

        Simon Fremaux shares with us an interesting collection of tooltips and buttons to share the content you create in the main social networks. You can find in this freebie a lot of tooltip shapes and tooltip positions, and the best thing: it is supported in all browsers.

      • Subtle Embossed Input plus Validation Tooltip

        This is a simple tool that validates every text you enter on the text input until you got your email right. It is simple, and it validates letter by letter. Edit the code to improve its design and functionality. This experiment was created by Eric Kidd.

      • Kyoo Tooltip, Varying Position Tooltip

        This is a nice code experiment that shows various positions of tooltips, including top, right, bottom and left. You can grab the code an edit it as you like. This resource was created by Andrew Abogado on Codepen.

      • Smooth Sliding Flat Tooltips in CSS

        This code snippet creates a series of areas showing a tooltip when you put the mouse over each one of them. The tooltip appears and slides smoothly, keeping a flat style, and perfect for integrating in any website. It was created by Conrad Holtzhausen in Codepen using HTML, SCSS and Javascript.

      • CSS3 Tooltip Shopcart with Details on Hover

        This code snippet shows a cart icon that displays a tooltip with details when putting the cursor over it. It has a nice and simple design, perfect for any e-commerce site. You can manipulate and change the HTML and SCSS codes in order to improve it. It was created by Codepen's user USF.

      • CSS3 Hole Element with Tooltip

        A CSS3 area resembling a hole which displays a tooltip on hover; it is a little slow, but it can be fixed with some code. It is built in HTML and CSS, and it was created by Codepen's user Aris.

      • Tooltips on Hover and Focus with CSS Transiti...

        CSS Tooltips, despite their limits, are very useful in any context. These tooltips can be located on the right, top, left and bottom side of a link or the element they get attached to. Be sure to edit the code extend their functionality and appearance.

      • Tooltiper, Embedded Tooltip Menus

        Tooltiper is a set of tooltip embedded menus in to show the user more that one type of information at once. It can be used to display links, images and texts, among other features, and they are activated by clicking on them, showing a simple sliding effect on the appearing tooltip.

      • CSS3 Tooltips Made Easy

        A nice tooltip made purely in CSS3, and that is shown when the link is hovered. The tooltip is styled wholly with CSS3 properties like gradients, box-shadows, text-shadows, border-radius and many more. The code allows easy customization and functionality edition.

      • CSS Arrow Please: Tooltip Arrows Generator

        A nice online tool for creating tooltip arrows with CSS. It manages the position of the arrow, the color of the tooltip, the border width and color. After you finish, you can grab the code to apply it to your website or blog.

      • Rich HTML Defined Speech Bubbles Tooltip

        Speech Bubbles Tooltip lets you add tooltips to links using either the value of the link’s title attribute, or rich HTML defined all inside a single HTML file and fetched using AJAX instead. The style of the tooltip is modelled after the iconic speech bubble and uses no images, thanks to the CSS triangle technique.

      • iOS 6 Inspired CSS3 Pop-Ups

        A set of 8 pop-ups windows inspired by iOS 6's interface. They make use of CSS classes to add arrows, justify text and remove dividers. They come in a solid black color and include light shadow effects for styling. Uploaded to CSSDeck by the user Kushagra Agarwal.

      • CSS Flat Icons Plus Tooltips on Hover

        This code snippet consists of a few lines of both HTML and CSS to create three compelling flat icons. On hover, each one activates the tooltip which can display any type of info, like plain text, images and links. They can be fully editable and integrated into any web project.

      • Beautiful 16px Pure CSS Icons

        This is a beautiful set of icons for different applications with a flat and pixel art style, including social and browser logos, fully created in CSS so they can adapt to changes within a website, like color variations, effects like shadows and glows, and more. This set was created by Claudio Gomboli and published on Codepen.

      • Beautiful and Simple Tooltip Created with CSS...

        This code snippet creates a simple tooltip in CSS3. It uses the title attribute of the link element to create the tooltip, the content of the tooltip is fetched by using attr(title) as the content of the :after pseudo element of the link, and the triangle is created using the border trick on the :before pseudo element.

      • Speech Bubble with a Simple Gradient

        A cool tooltip created with CSS to add some gradients to it. It has regular and hover states, and it can be used in chat apps, or to present complementary information about any element on a website. It was created by JSFiddle users' Piotr and Oskar.

      • Gmail Registration Form Bubble

        This is a simple registration form text field that resembles Google’s UI.  It also adds a tooltip to show information about the text input when it is clicked. Also, it includes radio and submit buttons. The code, created by Lavi Perchik, can be edited to improve its looks and functionality.

      • Delete Icon with a Modal Dialog Box

        This is a code experiment about an animated delete icon that activates a modal when clicked, giving the user the option to decide whether to delete an item or not. The code is fully editable so you can style it the way you want. Created by Bobby on Codepen.

      • Pure CSS Arrow Tooltip with Border

        This code snippet is an easy way to add an arrow for a tooltip, making it look even more realistic than regular tooltips. It was entirely created with CSS and HTML and can be edited to fulfill any purpose.

      • CSS3 Author Info ToolTip

        This is a link-based tooltip which displays an animated user info card when hovering over the link. This is achieved using the sibling selector (~) as the parent selector. The tooltip is styled using basic CSS3 techniques like gradients, multiple box-shadows to render those inner shines, and more.

      • Collapse Expand List View all items Download Collection Submit
    • CSS Hover (76 submissions)

      Give your social interactive elements an attractive appearance by applying CSS hover and animation effects to them.

      • Wenk: Lightweight CSS Tooltip

        Wenk is a Lightweight tooltip written in pure CSS using PostCSS. The minified version is 712 bytes when gzipped. It can easily be styled using data attributes or classes. The tooltip will adjust to fit the content.

      • Hover.css: Guide to CSS Hover Animations

        Hover.css is a great little CSS library that adds hover effects to your HTML links and buttons. This tutorial will bring you the basics to input neat hover effects on buttons and more.

      • Button Hover Effects Collection

        A showcase of different button's hover effects within an HTML & CSS codification, 5 different and smart effects made using transformations, rotations and transitions.

      • Perspective Text CSS Hover Effect

        This snippet generates an unusual hover effect that gives the text a unique look. Crafted in pure CSS the perspective effect is created by rotating the text in certain degrees and make it scroll upwards.

      • Vertical Slide-Out CSS Menu

        A CSS menu attached to the left side of the screen (beautifully designed and simple to use). The buttons show a label effect when they are hovered over, and you can use it on mobiles and desktops. It uses Font Awesome Icons, the open font Lato (via Google Fonts) and CSS3 transitions.

      • CSS & SVG Glowy Button

        A glowy button made in pure CSS and SVG filtering, it loads fast and can be used to decorate a specific area to provide focus to it. It also uses keyframes, and it's lightweight, making it easy to implement. You can change it's style and shape easily.

      • Pure CSS 3D Flip Buttons

        A set of buttons made in pure CSS. They are flat, but the flipping effect they have makes them look like they were 3D. The code, created by Josh Shor is really simple, does not take to much space and it's easy to modify. Use this for personal and client projects.

      • Pure CSS Responsive Honeycomb Grid

        A cool hexagonal grid for image and text made in CSS and HTML. The grid shows images by default but once you hover over it reveals the text, with enough space for a short title on small screens and a title with description in bigger screens. A pen created by codepen user web-tiki.

      • Pure CSS Puzzle Grid Gallery

        Quite a creative grid gallery that features its images in turned away jigsaw puzzle pieces that come into place as you hover over them composing the image.

      • Imagehover.css: Pure CSS Image Hover Library

        A CSS library featuring an easy implementation of hover effects on images, showcasing over 40 effects from a CSS library that you can preview live on their website, and the best the file weighs only 19KB.

      • Sticky Elements

        CSS and JavaScript resource to make links, buttons and even plain texts stick to your mouse. You can modify horizontal stickiness, vertical stickiness and duration with control bars.

      • CSS Outlined Boxes

        A set of 3 nice outline animations for boxes crafted with pure CSS featuring an underlining, a wiggled bottom line box, and a transition to a marked checkbox.

      • CSS Hover Falling Text Effect

        This beautiful text effect was created using CSS and nothing else. If you hover over the static text that appears, letter by letter start falling into position. The effect looks awesome on links and other types of texts you wanna draw attention to. Use the code for your personal and commercial projects.

      • SVG Clip-path Hover Effect

        Hover effect using SVG and CSS transitions with a circular frame sneak peek clip-path showing up some beautiful and dark illustrations.

      • Direction-aware 3D Hover Effect

        Basic and smooth 3D hover effect made with CSS and a little bit of JS, a direction sensitive cube that flips from the direction of the cursor to the center.

      • Hover Sliding Tab Containers

        A CSS snippet that recreates physical folder tabs that slide horizontally along with a whole page for content showcasing as you hover over each of the tabs.

      • Philter: CSS Filters jQuery Plugin

        A plugin for jQuery that allows you to create CSS filters from HTML classes. You can activate the filters on hover events and control the contrast, saturation, drop shadow, and more.

      • 8-bit Icons Hover Effects

        A set of icons featuring two different effects that make them seem like they've been crafted in a 8-bit grid. The transitions of the effects are stunning.

      • Cool Bootstrap Hover Image Effects

        A gallery with a variety of bootstrap hover image effects that can give your website the style you want. This gallery has effects with different transitions like zoom in zoom out, expanding, lens effect, bouncing and more that can fit into your project.

      • HTML & CSS Animated VCard

        A very appealing and fully customizable HTML and CSS animated ID card that initially is shown as a round photo and when you hover over, it pops open to a vertical identification card in a bouncy transition. Created by George Darkos.

      • Simple Tile CSS Hover Effect

        A code snippet displaying a tile hover effect made in pure CSS. When you hover over the tiles, it appears a dark semi-transparent box with text that can be modified to match your website. Images can be easily changed as well. The snippet can be used freely and was created by Chris Deacy.

      • CSS Animated Effects Navigation

        A collection of various CSS hover effects for texts and links. The effects are really simple and they have been inspired by a Codrops article. There are 15 effects here, you can choose the one that adapts to your site. The code can be used personally and commercially.

      • Different CSS Button Hover States

        A set of buttons in CSS and HTML including 10 different states like center-out, left to right, top to bottom, skew fill, flexible grow, scale, radius, inner and outer shadows. The code is really lightweight, and you can easily implement and style each button to fit your needs.

      • CSS Text Styles & Hover Effects

        A collection of several hover effects applied to texts, creating different styles and experimenting with a good number of fonts. These styles can be applied to any website or app; the CSS code is easily modifiable and it is free.

      • Animated CSS Hover Effect Menu Icon

        A nice animated CSS menu icon with a hover effect that allows it to change its shape. First it is a hamburger menu icon, when hovered over it becomes an animated atom and when clicked and held it turns into a cross icon for closing. The snippet is simple, made by Alex Coven.

      • Stunning SCSS Hover Effects

        A compelling set of 10 hover effects made in SCSS. The effects represent different aspects of technology and life like travelling, nature, architecture, animals, cities and more. They are lightweight and can be integrated into any project, personal or commercial. All credits go to Renan C. Araujo.

      • Responsive Background Images CSS Accordion

        A simple accordion made in CSS with the capability to adapt to any screen size. It uses the images as backgrounds and implements nice hover effects. You can use it on any project for free. Created by Michael Ferry.

      • Pure CSS Questionnaire Concept

        A compelling questionnaire made in pure CSS with hover effects and a material design. It consists of a medium-size widget with a featured area that changes when you select an item of the menu. It is a free snippet, easy to implement in any project and created by Nikolay Talanov.

      • Pure CSS Stylish Hover Effects

        A set of ten hover effects for multiple purposes. The effects included are scanning, piano, burn, movement, comet, bent, bridge, wrecked and beat. It's a free code snippet, ready for implementation and created by Renan C. Araujo.

      • CSS Material Design Social Buttons

        These are a set of gorgeous social buttons made in CSS with a material design appearance. When hovered over, they show the effect, perfect for recent types of websites, and the buttons included are for Facebook, Twitter, Google+, Dribbble and skype, although you can add any social network since it uses FontAwesome icons.

      • Favourite Outlined Flat CSS Button

        A beautiful button with colorful outlined and flat styles made entirely in CSS. This button has nice effects on hover and click, making it ready to be used in any web or mobile project. It was created by Jamie Coulter.

      • CSS Bubbly Faces

        A set of bubbly faces made in CSS that can be used to create a menu. These faces blink randomly and they move when the user hovers over one bubbly face. It was created by Codepen user Yurippe.

      • Animated CSS Twitter Button

        An animated button for Twitter made in pure CSS. It was created having in mind the material design trend and its characteristic animations. It is perfect as a standalone element, but it needs a little tweaking if you are going to integrate it with other social networks. It was created by Scott Marshall.

      • Jelly Letters: CSS & JavaScript Hover Te...

        A CSS and JavaScript text effects that resemble jelly. It is a lightweight creation that also has a reflection. It can be implemented as a decorative element in any website or mobile app. It was created by Mauricio Allende.

      • Scotch Digital: Exploding CSS & JS Logo

        A beautiful logo that explodes when you hover over it, made in CSS and JavaScript. It can be used in digital presentations and other public events as a decorative element that baffles your audience. It was created by Nicholas Cerminara.

      • Hobert Hovers: CSS Hover Effects Set

        Hobert Hovers is a set of hover effects made in CSS. The featured animations are all using SCSS, including left-to-right animations, right-to-left, fade slide from top, fade slide from bottom, fade in and out, fade and fill and flip to uncover. It was created by Martin Hobert.

      • Hover.css: Open Source CSS Hover Effects Plug...

        A set of hover effects for buttons, logos, SVG elements and links made in CSS3. You can modify them easily, and take advantage of its availability in CSS, Sass, and LESS. It is an open source creation licensed under MIT and it was created by Ian Lunn.

      • Animated CSS Business Card Mockup

        A business card made with pure CSS transitions that animates when you hover over. At first, it shows the logo and the basic information (name and occupation). When hovered over, the card displays the social and contact information, like phone number, website and Twitter account. It was made by M. Alex Junaedi.

      • CSS & jQuery Grid Zoom Effect

        A cool effect for zooming content, especially when it's in a gallery. The magic of this snippet relies in its smooth hover effect, which lets the hovered image flow through the container (thanks to the movement of the mouse). This is an easy to use snippet, made with CSS and JavaScript by Codepen's user Marco Barría.

      • Slide In: Intuitive CSS & jQuery Hover E...

        A simple CSS and jQuery snippet for creating a hover effect. It has the quality of identifying what element is hovered over next and that way it goes towards that direction (only up, down, left and right); this makes this hover effect kind of intuitive, although it is just a mind trick. It can be uses, modified and implemented freely.

      • CSS-only Calendar App Concept

        A simple calendar concept made with pure CSS. It is composed of a flat iPhone mockup showing a calendar in which you can select a date range, and then select the task you want to add to that date range. It is a compelling and useful creation by Codepen's user David Khourshid.

      • Hover Image Scale CSS Snippet

        A useful code snippet that shows us how to make a scale effect when we hover over the image. This code snippet not only shows the scaling, but it adds another layer with a simple caption. It has been created with HTML and CSS. This code snippet was created by Larry Geams, who also designed the images you see within.

      • CSS Rollover Menu States & Effects

        A set of rollover states entirely created in CSS. They are composed of triangular menus that activate different effects when hovered over. It includes logo reveal, grow regular and opposite, rotate right and left, and grow rotate. This code snippet was created by Andy Fought, who uploaded to Codepen.

      • CSS3 Funny Menu

        An excellent CSS menu created by Wagner Moschini with the appearance of stacked boxes. We can include it into our websites to make them more beautiful and striking, making it the main menu of a website, with the idea to drive users' attention to it.

      • Creative Link Effects jQuery Plugin

        A plugin made with jQuery that allows you to make a good number of creative link effects. By using pseudo-elements, we can add wonderfully animated transitions on hover, click or even as initial animations. The effects come in all sorts and shapes, so you’re bound to find one that suits your needs and looks amazing.

      • Simple Icon CSS Hover Effects

        A CSS snippet to create clean, classy hover effects for your icons using CSS transitions and animations. The results are quite different from each other, including highlights, slide animations in all directions, rotations, fades and much more.

      • Original CSS3 Hover Effects

        A pack of effects made in CSS that demonstrates how to create slick thumbnail hover effects with amazing CSS3 animated transitions. When moving the mouse over the images, an animation will reveal a text about them and a link for further information. There’s a good amount of examples in here, a perfect starting point for even more designs of your own!

      • jQuery & CSS Hover Click Trigger Effect

        A jQuery and CSS plugin that allows you creating a plugin that ensures the element can only be hovered over and clicked inside the circular area. It plays with the circular element with the border-radius property, in which is common to see that the active area of that element does not match its shape, since it has stayed as a square.

      • jQuery & CSS3 Thumbnail Proximity Effect

        A stylish thumbnail proximity effect made with jQuery and CSS3, that scales the images when hovering over them. The cool part is that not only the selected image is enlarged, but also the ones close to it relative to their distance, giving a smooth result.

      • Circle Transitions CSS Hover Effects

        A set of CSS transitions for creating interesting hover effects on circles with CSS transitions and 3D rotations. You will be able to experiment with hover effects applied to circles and try different uses for them, such as the creation of circular thumbnails.

      • Blueprint: Responsive CSS Icon Grid

        A CSS icon grid created by Mary Lou that adapts and rearranges its columns depending on the size of the screen. The grid can be customized by applying hover and/or click transitions and animations which will give it a polished look.

      • Responsive jQuery and CSS List Flip Effect

        A responsive list organized as a grid with multiple elements on the same line made with jQuery and CSS. When hovering on top of the elements, they flip with a fancy animation and light up in different colors. Once we click the element, it takes the whole space on top of the others by sliding in from the side.

      • CSS Sliding Menu Tiles

        A centered group of colorful icons with smooth slide animations made in CSS. It features mouseover effects for big screens and focus effects for smaller devices. As a fun little detail, an extra menu can be seen after entering the famous Konami code.

      • After-Effectsy CSS3 Transitions

        An awesome set of ten different transition effects created with CSS3 and activated on hover, perfect for applying them to images and/or icons. Their inactive states include overlays in circles and square shapes, in diverse variations. Created by ksk1015 and uploaded to CodePen by Joakim Wimmerstedt.

      • Twitter Logo CSS Animated Button

        A pretty circular icon displaying the Twitter logo over a white background. The surprise comes when moving the mouse over the element, which causes the logo to rotate, invert its colors and make the logo grow considerably larger. Uploaded to CodePen by Saurav Tomar.

      • Stereoscopic CSS3 3D Text Effect

        A stereoscopic 3D effect with CSS3 only. The author was just created playing around but then realized it actually works. Basically you just need one line of CSS. A text-shadow with a red and cyan offset and the trick is to use “em"s for the text-shadows. That way, if you change the font-size, the text-shadows change in the same proportion.

      • CSS3 Inner Animation Social Buttons

        A fantastic set of social icons styled with a strong blue color. Their main attraction comes in the form of a smooth animation triggered on hover, which makes the circles lose their blue color, inverting the color palette on the buttons. There are five different websites to choose from.

      • Animated CSS3 Downloader

        LukyVj from CSSDeck has decided to apply a recently-found effect to this full-screen loader, with neat results. It shows three screens in total: A simple "download" button with a white background when inactive, switching to black on hover. Finally, when clicking on it, a spiralling couple of glowing arrows signify the start of the download.

      • Interactive CSS Mega Shadow Text Effect

        A wonderful interactive shadow effect that can spread to huge proportions, taking the whole screen. The mouse works the magic: Left and right movements control the shadow size, which can go all the way to the frame of the page. Up and down movement manages the vertical position of the shadow.

      • CSS Flip Menu Perspective

        A sleek menu by CSS Deck user José Barcelon-Godfrey. He provides a nicely designed menu with smooth hover animations that show a description of the option we are highlighting along with a pretty background picture. Webkit browsers are recommended in order to get the most out of this tool.

      • CSS Radial Menu Experiment

        A cool experiment that uses only CSS with their option for radial menus. Based on an older pen, this is a recreation of that original project. The menu starts at the top corner and, making use of a transition, it displays a set of selections on hover. It was uploaded by Codepen's user Anonasaurus Rex.

      • CSS 3D Text Shadow Effects

        A project that provides a way to apply awesome effects to a piece of text. When hovering on the sentence, it moves forward and separates from the background, with a shadow accentuating the illusion. Also, the letters gain a 3D appearance, which gives them more presence.

      • CSS Hover-Activated Accordion

        A fantastic accordion styled with pure CSS. It expands and collapses its sections by just hovering the mouse over them, showcasing a smooth animation in the process. Also, it goes back to its original state right after moving the cursor away. Uploaded by CodePen's Cory.

      • Unorthodox CSS Links Hover Effects

        A super original set of seven different hover effects, all applied to regular text (which could be displayed inside your usual blog entry, for example). They include blurs, cloning, underlines and much more, all styled with the power of CSS. Uploaded to CodePen by Mateusz Kocz.

      • Blurring CSS Hover Effect

        A visually attractive experiment that makes full use of CSS to display a piece of text and apply a blurring effect plus an animated line going below it at the same time. Bring the mouse back to view the text again in normal circumstances. Uploaded by CodePen user Monkey Raptor.

      • Circular Motion jQuery & CSS Effect

        A nice jQuery and CSS plugin made by Mary Lou from Codrops. It helps you create a menu formed by floating circles. One main element will display options that, when hovered, will have a smaller circle complementing the information. It is created using the jQuery.path plugin for the animations.

      • 3D Thumbnail CSS Hover Effects

        A useful and complete Codrops tutorial is going to explain you an amazing set of techniques used to create appealing hover effects on a set of images. When touching the cursor, CSS 3D transforms are triggered, "bending" the image and revealing hidden information behind them.

      • Images Dropdown with CSS

        This fantastic design provides a very stylish way to display pictures through a dropdown menu of circular thumbnails that activates when hovering on the list icon on the bottom. It uses Sass with Compass to handle all the animation and overall operation of the snippet. Brought to life by CodePen user Alex Lime.

      • Creative CSS3 Animation Menus

        A truly impressive set of animated menus created with CSS3. We dispose of 10 examples with gorgeous transitions using blurs, slides, turns, zooms and more, applied either alone or in combination. If you want to have a good looking site with awesome menus, you won't find many choices better than this.

      • Pure CSS Spin-Out UI Menu

        A very cool menu created in CSS by Billy Crist from CodePen. All you need to do is hover over the main menu icon, this will trigger a beautiful and smooth animation that displays all options available around the circle. Perfect for showcasing short or basic info in a tight space.

      • Fancy CSS Hover Icon Fonts

        A set of icon fonts that also come with a tutorial for teaching you how to get the most out of icon fonts, which are an amazing way to ensure high-quality viewing on retina displays. Apart from using the font, the author applies a wonderful hover effect to the set.

      • Colorful CSS3 Animated Navigation Menu

        With this thorough article, TutorialZine's  Martin Angelov is going to teach you how to create a beautiful navigation menu using pure CSS3 and the Font Awesome icon font. The dropdown will also include neat animations that will show options when hovering on the large icons.

      • Spinning Logos Fading CSS Effects

        A code snippet with spinning logos, perfect to animate a website or a mobile app. On hover, the jQuery logo spins and fades out while the jQuery-ui logo fades in. When you move your mouse out of the logo, it happens the same but in the opposite direction. You can edit the code to make it even more functional than the original.

      • CSS 3D Facebook Button Concept

        A button is created in 3D by using the Webkit-perspective property (that only works in Webkit browsers, of course). Then, it uses the transition property to trigger the transform animation when the button is hovered, which reveals the number of fans (that can be replaced by any other piece of information).

      • Incredible CSS Share Button

        A fantastic bar intended to provide links for social networks through elegant hovering mechanics. When moving the cursor over it, the button opens up, revealing links to four different social services. It makes use of a few CSS properties such as box shadows, transitions and transforms.

      • CSS Social Flip Cards

        A fantastic set of twelve different flip cards, each linking the user to a different social network (including  Twitter, Facebook, Google+, Dribbble and many more). They are visually very appealing, featuring smooth hover animations that reveal the full-color versions of the icons. Uploaded to CodePen by Charlotte Dann.

      • Collapse Expand List View all items Download Collection Submit
This a test message in global notification
Your download will start shortly.


Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.


Thank You!

Your post has been received, and will be reviewed by a curator