CLOSE
(close intro)
CLOSE
    • JQuery Tooltips (28 submissions)

      Multiple jQuery tooltip plugins coming in different flavors and providing easy implementation. These tools are ideal for guided tour pages on your websites and other similar tasks.

      • Colortip: Minimal jQuery Tooltip Plugin

        A simple jQuery tooltip plugin called Colortip that converts the title attributes of elements within your page, into a series of colorful tooltips. Six colors are available, so you can easily match them with the rest of your design. You can also easily create your own tooltip designs by just including three additional style classes to your stylesheet and adding an element to the supported colors array in Colortip.

      • BeautyTips: jQuery Tooltips Plugin

        BeautyTips is a jQuery tooltips plugin which uses the canvas drawing element in the HTML5 spec to dynamically draw tooltips (sometimes called “talk bubbles”) associated with an HTML element on the page. These tips are highly configurable, stylable and can be triggered in many different ways.

      • jQuery Website Tooltip Tour

        A very nice jQuery script that allows you creating a site tour really easily. It works by adding classes (with a specific format) to the elements to be highlighted and then configuring them to display any custom text. The script can work manually by the user clicking prev-next links or totally automated in the pre-defined order. Tooltips displaying the information can also be customized as color, position and the duration they will be active.

      • ImageMapster: Image Tooltip Enhancing jQuery ...

        ImageMapsteris a plugin for jQuery that simplifies the process of guiding users to discover the features of a website. By defining the steps of the tour as an ordered list, the plugin displays desired information near any HTML element inside tooltips.

      • QrTip: QR Code Tooltip jQuery Plugin

        qrTip is a simple script plugin made with jQuery that allows you to add QR code popups to your links. It’s free and easy to use, and to use it just include a style sheet and a JavaScript file to your web page. It is a project by Konstantin Kovshenin.

      • ImgPreview: Link Preview Tooltip jQuery Plugi...

        The imgPreview jQuery plugin allows your users to preview an image before clicking on it, preloading the image so when a user does click through to it there is no waiting time. The image preview shows up in a tooltip-like box appearing alongside the user’s cursor when hovering over a link. The plugin is entirely unobtrusive; it does not require any hooks to target specific links and it will automatically detect the anchors that are linking to images and will only apply the preview effect to them.

      • Tipped.js: Complex Tooltip jQuery Plugin

        Tipped.js is a plugin made with jQuery that allows you to easily create both simple and complex tooltips. The tooltips can include a wide range of elements like images, and texts in various sizes and weights. If you also use Scriptaculous, you can even add some nice effects to them.

      • jQuery and CSS3 Simple Tooltip

        A jQuery and CSS3 Simple Tooltip works by popping up a bubble with more information about a word when you hover over it. You can even add an image to highlight the popped up info. The tooltip plugin is free and can be integrated easily.

      • Style My Tooltips: Lightweight jQuery Tooltip...

        A small in size (3kb unmodified) script to enhance the look of tooltips. It works just like browser’s native tooltips with few options and styling via CSS. By default, the script applies to any element with a title attribute like links, paragraphs, images etc. but you can easily set it to affect only specific classes.

      • UniTip: Customizable Cross-browser Tooltip Sc...

        UniTip is an easy to implement & customize cross-browser tooltip script. The tooltip script is also lightweight & accepts HTML to be displayed. It uses transparent PNG’s for creating the tooltip balloon. The script does not rely on any JavaScript frameworks & can be applied to specific tags or classes.

      • TipTip: Responsive jQuery Tooltip Plugin

        TipTip is a jQuery plugin that detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result, the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element. It is a very lightweight and intelligent custom tooltip jQuery plugin with no images and completely customizable via CSS.

      • qTip: Advanced jQuery Tooltip Plugin

        An advanced jQuery tooltip plugin built to be user-friendly, yet feature rich. It provides you with tons of features like rounded corners and speech bubble tips. Completely free under the MIT license.

      • ggtooltip.js: jQuery Tooltip Plugin

        ggtooltip.js is a jQuery tooltip plugin extended from the Twitter Bootstrap plugin. It supports 4 positions, you can change the background color, the font color and the border. You can also set data attributes, integrate jQuery and more. It was created by gigagit.

      • Tipso: Responsive Tooltips WordPress Plugin

        Tipso is a simple plugin for creating responsive tooltips. The resulting tooltips can be adapted into any mobile or desktop screen, animated and fully customizable for a determined hovered element. When you install it, you'll see a button in the editor for adding the content easily. Then it just inserts the shortcode into the editor. It is a free plugin.

      • Tooltipify: Stylable jQuery Tooltip Plugin

        The tooltipify plugin creates a slide in, stylable tooltip to replace the default browser tooltip. The latest version has display awareness and also responds to the window resize event. This plugin also supports HTML content by using the content property.

      • Zebra: Lightweight Tooltip jQuery Plugin

        Zebra_Tooltips is a lightweight jQuery plugin (around 5KB minified, 1.6KB gzipped) for creating simple but smart and visually attractive tooltips featuring nice transitions and offering a wide range of options for configuration. It is free.

      • tooltipsy: jQuery Tooltip Plugin

        Tooltipsy is a jQuery tooltip plugin that was created to provide extremely efficient tooltip functionality; it gives you complete control over the CSS, animation, and position. It is free.

      • Akita: Speech Bubble jQuery Plugin

        Akita is a light-weight and customizable jQuery plugin that helps web developers create smarter tooltips easily and efficiently. It requires jQuery and is released under the open source license MIT. Anyone can modify and use it without any restriction.

      • Default Positioning Tooltip Plugin

        jquery.tooltip.js is a cool tooltip plugin with default states for positioning. It can be positioned on top, bottom, left and right, and It is also ready for mobile!

      • Sweet Tooltip: jQuery & CSS3 Plugin

        Sweet Tooltip is a jQuery & CSS3-based tooltip, not merely a one-style tooltip, but seven. These imageless tooltips are crafted using CSS power, linear-gradient, box-shadow, text-shadow, :after and :before selectors, among many others.

      • Poshy: jQuery Tooltip Plugin

        This jQuery plugin makes the default browser tooltip that displays the value of the title attribute, convert into a slightly different but improved version. You can apply styles to it, make content load asynchronously, trigger the tooltip manually, and many more options to have fun with.

      • Simpletip: Easing Effect jQuery Tooltips

        Simpletip is a jQuery plugin that allows you to create tooltips with ease on any element on the page using the power of jQuery's selectors and event management. The tooltips can be static, dynamic, or even loaded through AJAX with a variety of different visual effects.

      • qTip2: Advanced jQuery Tooltip Plugin

        qTip2 is the second generation of the advanced qTip plugin that takes advantage of the power of jQuery. It provides you with tons of features like speech bubble tips and image map support, and best of all, it is open source and free to use, released under the MIT and GPLv2 licenses.

      • Opentip: Free JavaScript Tooltip Framework

        Opentip is a JavaScript tooltip framework. It’s free, open source and there are great styles built right into it, making it easy to create your own. The tooltips are drawn on canvas which creates beautifully rendered tooltips in all kinds of browsers.

      • Grumble.js: Rotating jQuery Tooltips

        Originally written for Huddle.com, grumble.js provides individual tooltips without the usual limitations of cardinal positioning. A grumble can be rotated around a given element at any angle, all 360 degrees; any distance can be specified, and any CSS style can be applied.

      • Tipsy: Facebook-like Tooltips Plugin

        Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag’s title attribute. By default, tooltips will appear centred underneath their anchor, it can be arranged to manage tooltip positioning in any cardinal point.

      • Tooltipster: Semantic Tooltips jQuery Plugin

        A powerful, flexible jQuery plugin that enables you to create semantic, modern tooltips enhanced with CSS quickly. In order for Tooltipster to work, you first need to add the .tooltip class (or whatever class / means of selection you'd like to use) to the element you wish to have a tooltip. Next, we'll set the title attribute to whatever we'd like our tooltip to say.

      • PowerTip: jQuery Tooltips Plugin

        A jQuery plugin that creates tooltips on hover. PowerTip features a very flexible design that is easy to customize, it gives you a number of different ways to use the tooltips, has APIs for developers, and supports adding complex data to tooltips.

      • Collapse Expand List View all items Download Bundle Submit
    • Web Development Tools (53 submissions)

      Multiple purpose web development tools, ideal for improving daily workflow and adding extra functions to your projects.

      • Online Microdata Snippets Generator

        An online microdata generator that helps generating rich snippets and graphs supported by Google. It supports a full list of structured data schemes, and it lets you aggregate offers, reviews, articles, business, events and contact info, software apps and more.

      • CSS Div & Text Centering Tool

        A simple online tool for centering divs and texts with CSS. You just need to select the content you wanna center, modify the container's size, its alignment and that's it. Finally, download the CSS and include it on your template. It was created by Oliver Zheng.

      • .resizr: CSS Media Queries Testing Online Too...

        .resizr is an online tool for testing any website's media queries to check if it is completely responsive. With it, you just add the URL of the site you wanna test and select the device, mode and other features. There are almost 30 devices to test your site on, and you can use it for free.

      • Open Source Large Files Versioning Github Ext...

        Git Large File Storage is an open source extension that allows you versioning large files. It replaces these large files (like audio and video), including text pointers inside Git, and at the same time stores the contents on remote servers. With it you have more repository space, faster cloning and fetching, access controls and permissions.

      • WPSpeedster: Website Speed Testing Online Too...

        A website with Google PageSpeed test scores for 2500 free themes from the official WordPress theme repository. The tests were executed on the blogs sample page and the home page, both in mobile and desktop environments.

      • Nines: Web Development Performance Tool

        Nines is a web tool that helps developers find critical performance issues while developing. It intends to show developers and designers the impact their changes have on the performance of the site. It shows a bar at the bottom with the page speed, the median, and you can click on them and check more data.

      • Prepros: Multilanguage Programming Compiler

        Prepros is a compelling tool for developers that allows them to compile LESS, Sass, Compass, Stylus, Jade and many more languages thanks to CSS prefixing. You can download it for free and use it on Mac, Windows or Linux machines.

      • osquery: SQL-powered Analytics, Monitoring &#...

        osquery is a complete tool for operating systems made in C++, JavaScript and powered by SQL. It was created by Facebook and its goal is to provide strong and accurate analytics, monitoring and instrumentation. It can be downloaded for free and implemented in any web project.

      • Dust-Me Selectors: Firefox & Opera Code ...

        Dust-Me Selectors is a development tool for Firefox and Opera that scans the CSS code on your website and tells you which selectors are unused. Among its features you can scan any HTML page, add an XML or HTML sitemap and scan pages automatically (Firefox version only).

      • APIs.io: Online API Search Engine

        APIs.io is an experiment that allows you to search APIs on the web. You can implement the search engine, which is also open source, and run it in your own projects. It crawls known APIS.json files, top domains on Alexa and follows include links.

      • Online UX Project Checklist

        The UX Project Checklist is an online tool that helps developers check their process while creating a website, helping them to create a user-friendly and goal-focused website. The tool helps you check if you have accomplished the research, plan, explore, communicate, create, feedback and more stages of the UX process. This tool is free and you can connect it with Google+ to save your progress.

      • Scala: Object Oriented Programming Language

        Scala is a scalable language for creating apps, it is Object-Oriented, supporting advanced component architectures through classes and traits; functional, efficient, integrated seamlessly with Java, future proof and more. It is open source and ready to implement in any project.

      • Breach: JavaScript Modular Browser

        Breach is a modular and free browser created entirely in JavaScript that has versions for Mac OS and Linux only. It uses HTML, CSS and JS in its first layer, the Chromium Content API in its second layer (allowing it to be secure) and NODE.js in its third level.

      • Screen Sizes: Complete Devices Charactistics ...

        Screen Sizes is a complete table of sizes for every mobile device known. It includes information about the operating system of the device, the physical size, its width, height, the pixel density, aspect ratio, and more. This table is a starter point for any type of design, if you want to implement a creation that reaches more people.

      • Nitrous: Multilanguage Browser IDE

        Nitrous is a complete IDE for your browser that lets you program in Ruby, PHP, Python, Go, NodeJS and other languages. You can synch it with your favorite code editor such as Atom, Sublime Text or Textmate, allowing you to work from anywhere in a shared or private workspace and do it fastly.

      • Tweene: JavaScript Animation Proxy

        Tweene is a JavaScript library proxy that allows you to control and switch between several types of different JS libraries, created for multiple purposes. It is a great way for avoiding so much coding, providing flexibility and stability in the process. It works with GSAP, Velocity.js, Transit (CSS transitions) and jQuery.

      • ngrok: Localhost Secure Tunneling Multiplatfo...

        A downloadable tool that creates a tunnel from the public internet to a port on your local machine. It is useful in the case you are developing a website, and you want someone outside to see how's it going without deploying it. You just pass the URL and grant access. ngrok also captures all traffic through the tunnel.

      • Frontend: Web Development Boilerplate

        The Front-end Boilerplate is an easy to use development tool for creating attractive and useful web projects. It has a tasks manager, you can use your dependencies, you can choose what preprocessor to use, and it includes many features that can make your development a great experience. You must have Node and npm installed to use it.

      • Subtext: Web and Desktop Code Editor

        Subtext is a code editor for Chrome browser and Chrome OS; an offline tool that you can use on your browser and desktop. It lets you edit local files thanks to a simple user interface. Among its features you can find: - Project management - Fuzzy search for opening files - Versatile layout - Fullscreen mode It supports several types of syntax, including HTML, CSS, Javascript, PHP, LESS, Stylus, Coffee, Ruby, Python, Markdown, Mustache, and many more. You can download it for free.

      • Webplate: Website Building Front-end Framewor...

        Webplate is a useful front-end framework that allows you to focus your attention exclusively on building your website or mobile app. It is a UX experiment that you can download and use for free, or improve since it is open source. Inside you can find: - A robust and responsive layout engine - Global buttons and elements - Customizable forms - Simple modals - Icon fonts support Also, it includes two types of "starter kits": the Quill UI and the Stripe UI. The first one created for writers and the other one for quick creations. This framework was created by Chris Humboldt and was uploaded …

      • Website Development Starter Kit

        This is a web starter kit that will help you not only create a compelling and useful website that can be viewed in any desktop or mobile device, but to know how you can improve it at all levels. Among its features you can find: - A responsive boilerplate. - An up-to-date style guide. - Cross-device synch. - Live browser reloading. - Performance optimization. - Insight reporting. - SASS Support.

      • Scotch Panels: jQuery Off Canvas Menus and Pa...

        Scotch Panels is a jQuery plugin for easily creating off canvas menus, navigation, and other panel types such as images, videos, and iframes. They have lots of features and different options for every skill-level to tweak and implement into almost any project. They work from any container so you can put your side navigation on any element you want. It even provides excellent browser support via a JavaScript fallback.

      • AngularJS and Bootstrap Responsive Dashboard

        ​This dashboard was created as an accessible, responsive and certainly good-looking alternative to other admin panels out there. It starts out pretty simple, providing you with a small number of modules to keep things clean, but you can always add more as the project goes along.

      • Omega! Web Platform for Python

        Omega is an attempt to bring back innovation to Python web frameworks. Its goal is to be more than a web framework since it aims to be a platform on which any type of web application can be built, batteries included. That means  this tool ships with support for creating ORM-backed CRUD applications, NoSQL REST APIs, real-time applications using Websockets, and simple, mostly static page applications.

      • jQuery ScrollAdvance: Plugin for Movable Back...

        This jQuery plugin allows the user to move the background in any cardinal direction thanks to values that can be changed, adding useful functions for the scroll position as scrollBottom() or scrollTop(). It is published under the MIT License.

      • heatmap.js: Dynamic Web Heatmaps

        A JavaScript library will help you make three-dimensional data speak up. Heatmap.js v2.0 adds new value to your project, and you can build a business based on it, study and visualize user behaviour, and much more. Whether you want to have an aggregated overview of your users behaviour or look at thousands of events distributed on a map, this tool has all your heat map visualization needs covered.

      • CSS Layout Generator

        This is a supremely useful tool that will generate column layouts including footer, header and menu. You can set the measurements by either pixels or percentages. The inclusion of sidebars can also be controlled. Take a look and create the right foundation for your project. It was created by Generate It!

      • Online CSS Validator

        ​This online tool created by the guys at CSS Portal helps you validate your CSS files with a simple form. Validating your CSS is the first step (before optimizing it) since it allows you to find errors in your CSS that can make your page display incorrectly. After that, a good optimization is required and can help you website load faster and smoother than ever.

      • CSS Code Optimizer

        ​Optimizing your CSS code is crucial if you are running a large site. CSS has a tendency to get cluttered, just like HTML does. This generator will format and optimize your CSS code using a variety of different compression settings. Once you're done with your CSS codes just upload them to your web hosting service provider and see the results of your CSS design online.

      • Online Password Generator

        ​This online password generator will allow you to create a range of strong and secure passwords using a combination of uppercase letters, lowercase letters, numbers and punctuation symbols. Within you can select the password length, lowercase letters, capital letters, numbers, punctuation, and avoid similar characters to create a powerful password. Then just click on generate, and you are done.

      • Bootstrap Magic: Online Tool for Creating The...

        Bootstrap Magic is a great tool for creating your own Twitter Bootstrap theme. And after all, you can save it. It takes advantage of the latest version of Bootstrap; you can preview your work, import variables, pick colors easily, choose from lots of Google Fonts and many more features.

      • Hex Tool for Managing Color

        This is an interesting tool for managing color. It works just by adding the 6 digit hexadecimal value for a color and it will give you similar ranges. You can also lighten or darken the ranges, and apply other options to get the best variation and apply it to your website.

      • LayerVault: Organize, Present and Collaborate...

        LayerVault is a cloud-based application that manages revisions, stores files and helps designers collaborate around designs. With it, you can synchronize, store and organize your design files, but it syncs only the projects you need, giving you the option to store different sets of projects.

      • -prefix-free: Use Only Unprefixed CSS Propert...

        -prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed. Among its features:- Processes every stylesheet in <link> or <style> elements and adds a vendor prefix where needed.- Processes elements with a style attribute and adds a vendor prefix where needed.- Takes care of new <link> or <style> elements, style attribute changes and CSSOM changes (requires plugin).- Lets jQuery’s .css() method get and set unprefixed properties (requires plugin).

      • Typecast: Create Better Web Typography

        ​Use Typecast to create visual and semantic designs. This online tool allows you to arrange the texts of any website, modify the typeface, weight, color, size, spacing and more. You can also create various instances of the same page; for instance, you can set up different configurations for different screen resolutions.

      • Bonfire: Easy PHP Web Applications

        Bonfire helps you build CodeIgniter-based PHP web applications even faster than ever by providing powerful tools and a beautiful interface you won’t be ashamed to show your client. With it you have built in users, enhanced debugging and a significant set of developer tools.

      • Screenhero: Easily Review your Code

        Screenhero is awesome for code review and pair programming. With simultaneous control, both sides can switch seamlessly between driving and navigating, with zero overhead. Works with every IDE. Instantly present your ideas to your clients, without having to send multiple files back and forth.

      • sachet: Handcraft your Own Development Enviro...

        sachet allows you to handcraft your development environment. By allowing you to select features and functionality that you are comfortable with, it generates you a small package with the appropriate configuration files, plugins, and theme so you can leverage the potential of your Vim editor.

      • Chronos: Fault-tolerant Schedule

        Chronos is airbnb's replacement for cron. It is a distributed and fault-tolerant scheduler which runs on top of mesos. It's a framework that supports custom mesos executors as well as the default command executor, thus executing SH (on most systems BASH) scripts.

      • Scriptular: JavaScript Regular Expression Edi...

        Scriptular is a JavaScript regular expression editor. Inspired by Rubular, it gives you a simple way to test JavaScript regular expressions as you write them.

      • js-sequence-diagrams: Turn Text into UML Diag...

        Here we have a simple JavaScript library to turn text into vector UML sequence diagrams. This tool was heavily inspired by the website websequencediagrams.com, which offer a serverside solution. You can use Jison to parse the text, and Raphaël to draw the image.

      • Log: Console with Style

        Log is a simple utility to add style to the browser’s console output. It makes developing for the web and debugging easier by adding colors, ordering content, and more.

      • VisualOps: Cloud Management for AWS

        Here we have a drag and drop real AWS resources to a canvas to quickly design your application architecture. It features several improvements like: - Drag-n-drop to build. - Built-in modules to configure instances. - One click to launch. - Easy exporting. - Realtime cost estimation.

      • TogetherJS: Collaborate in Real Time

        TogetherJS (formerly know as TowTruck) lets users communicate, co-author, co-browse and guide each other. It’s is implemented in Javascript; no software or plugins to install, and it’s friendly with existing web pages, while still letting developers customize the experience.

      • csxs: App Development Tool

        csxs is a command line tool written in node.js for creating, compiling, packaging, debugging, and deploying extensions for Adobe Creative Suite. It’s easy to use and it is powerful.

      • xctool: Easy App Creation

        xctool is a replacement for Apple's xcodebuild that makes it easier to build and test iOS and Mac products. It's especially helpful for continuous integration, and among its features you can find:- Runs the same tests as Xcode.app.- Structured output of build and test results.- Human-friendly, ANSI-colored output.- Faster, parallelized test runs.

      • Yeoman: Web Tool For Building Apps

        Yeoman helps you kickstart new projects, taking into account the best practices and tools to help you stay productive. It provides a generator ecosystem, which is  a plugin that can be run with commands to scaffold complete projects or useful parts.

      • Brunch: Lightweight HTML5 Application

        Brunch is a lightweight approach to building HTML5 applications with an emphasis on elegance and simplicity. This tool compiles your scripts, templates, styleslints themwraps the scripts and templates in common.js / AMD modules. It concatenates scripts and styles, generates source maps for concatenated filescopies assets and static filesshrinks the output by minifying code and optimizing images. watches your files for changes, and notifies you about errors via console and system notifications.

      • Deployd: Build APIs Easily

        Deployd is an open source platform that allows you design, build, and scale APIs for web and mobile apps in minutes instead of days. After you've set it up, you can deploy to a high-performance cloud, or host it yourself. You have an API just with one click, manage its resources through a web-based platform.

      • Viewport Resizer: a Responsive Bookmarklet

        Viewport resizer is a browser-based tool to test any website’s responsiveness. Just save the bookmarklet, go to the page you want to test, click on your created bookmarklet and check all kinds of screen resolutions of the page. It features: - Full customization. - Add and customize sizes on the fly. - Manual orientation toggle by click. - Automatically device window orientation in "Auto Size" mode. - Media query support. - Viewport animation. - Adapt meta viewport tag from the current page.

      • Emmet: Optimized Snippets for the Web

        Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimised for web-developers whose workflow depends on HTML/XML and SSC, but can be used with programming languages too.

      • Vagrant: Development Environments Creator

        Vagrant allows you creating and configuring lightweight and portable development environments. It is a tool you can install on Mac OS X, Windows, or a popular Linux distribution. After that, create a single file to describe the type of machine. It creates identical development environments for everyone involved in the project.

      • Adobe Edge Animate CC: HTML Animation Authori...

        ​The Adobe Edge Animate CC is a great tool for creating animated, interactive content for the web. It allows web designers create HTML for web and digital publications, as well as sophisticated ads for media that can be viewed on any device.

      • Collapse Expand List View all items Download Bundle Submit
    • CSS Hover (92 submissions)

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

      • 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.

      • Pure CSS Dropdown Menu

        A simple flat menu with smooth effects made in CSS format. It follows the mouse when you hover over one item, and it displays a submenu. The animations were carefully crafted with CSS and it can be implemented on any website. This was created by Codepen's user Robert.

      • 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.

      • Cool CSS3 Link Effects

        A set of effects for links made in CSS3, including left to right, right to left, start centered, different top and bottom options, cool square and more. You can integrate these link styles in any project and modify them if you want. The effects were created by Brenden Palmer.

      • CSS Button Hover Styles

        A code snippet made in CSS displaying three buttons with hover states and transitions. This is a lightweight creation that can be implemented in any web or mobile app project. It was created by Galen Strasen.

      • CSS & JavaScript Mouse-follow Hover Effe...

        A hover effect made in CSS and JavaScript that creates a bubble effect when hovered over, similar to the effect of the dock in OS X. It can be used perfectly in any website or even a mobile app. It was created by Hieu Huynh.

      • 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.

      • 3D hover effect in CSS – CodePen

        Also see: Tab TriggersLike, at all. Sorry. If you enable it and reload this page you'll be good to go. Need to know how? Go here.

      • 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.

      • CSS Images Caption Hover Effects

        A set of CSS effects to create a fancy hover effect for image captions. In the example, images are displayed and on hover, a caption appears giving us information about the author and a link button. Many effects are shown in the article, making it a great source of inspiration for new creations.

      • 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.

      • Social CSS Sliding Buttons

        A sliding set of social buttons made in CSS and created by Marius Balaj, inspired on a Dribbble shot by Paul Flavius Nechita. It includes buttons for Facebook, Twitter, Google+ and LinkedIn.

      • Hover CSS Social Buttons

        Created by Marius Balaj and uploaded to CodePen, this code snippet creates cool social media buttons with a hover slide effect applied with pure CSS. The buttons look really well and provide a more visually appealing alternative to the classic social media buttons.

      • CSS3 Responsive Navigation Menu

        A responsive menu that includes dropdowns on the design, created with pure CSS3. The elements on the menu are intended to resemble those on the periodic table. This menu was made and also uploaded to CodePen by the user Jeremy Cloutier.

      • 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.

      • CSS Sliding Border Navigation Menu

        A navigation menu created by CodePen's Marcello Africano. Styled with bright colors, it highlights elements on hover with a bar at the bottom of the selection, making use of a super smooth animation. Everything you see in the demo is coded with CSS.

      • CSS Unwraping Menu Hover Effect

        An interesting menu that features a contracted piece of "paper" that expands on hover by using a neat transition. After this, it displays a set of icons that can be used by the reader. Created by Nate Cohen based on a Dribbble shot by Adis Hasanic.

      • Pure CSS Trapdoor Hover Reveal

        The idea of this CSS snippet is to show pictures and be able to raise them on mouseover, showing a caption underneath. A cool shadow effect ensures the effect remains convincing for the visitor. This nice initiative comes from Joshua Hibbert.

      • Tagging & Navigating CSS Breadcrumbs

        A code snippet that creates a CSS-only set of tags, although the result is pretty limited if you want to take it any further with transitions and stuff. It has a hover state in which the color changes and the tags get adapted to the size of the text in the label. The code is well organised and teaches us how to create both the triangles and the inner circles.

      • CSS Books Collection Showcase

        A code snippet that displays some book covers sorted by category, adding a little animation when the mouse is over, showing a book stock; this is achieved by using the CSS box-shadow property. You can edit the book covers and place any image so its integration gets easy, for instance, into an online store or a catalog. This experiment was created by Grant Zabriskie.

      • Red & White Dots CSS Social Buttons

        A beautiful concept for a trio of social buttons that come with a rather particular (but very attractive) style: Red and white dots. These polka-dressed buttons have noticeably different states, expanding on hover and becoming darker when clicked. Coded by Chris J. Lebron.

      • CSS Animated Social Icons

        A cute set of animated social buttons, perfect to promote yourself at the end of any website, for example. The icons appear with a simple gray style, then sliding to full color once we move the pointer over them. The sites provided are Dribbble, Behance, Facebook, Twitter and Instagram. This snippet was created by Ryan Bishop.

      • CSS Hover Icon Flip to Text

        A simple code snippet for a circle containing an icon that flips to text on hover. It was made using CSS3 transformations and transitions, and it can be used in any website to present simple information or even add links to it. It was created by Andrew Do and uploaded to CodePen.

      • Simple CSS Split Text

        Split real-life text in twain, reveal some stuff inside. Could probably done with less code and not have the crazy FUC, but I've only got so much time this morning to get this out of my head so I can get on to real work.

      • 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 Animated Social Media Icons

        A nice set of animated social buttons for four different social alternatives: Facebook, Twitter, Google+ and RSS Feeds. Initially, they come in a dark gray appearance, but when hovering over the icons, a slide moves down, revealing the logos in full color. It was uploaded to CSSDeck by Emilios M.

      • CSS Animated Sliding Social Buttons

        A nice couple of social buttons for the two most common networks: Twitter and Facebook. Hover over any of the two to see a "like" or "tweet" option animate from the bottom of the designs. Coded by Gonzalo Fuentes, based on an original Dribbble shot from Caleb Andrews.

      • 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.

      • Dark Social CSS Navigation

        A pleasing and subtle navigation menu created with pure CSS. It starts with a tiny block, including a minimalist icon, when you hover over this element, a set of icons with social networks appear, but with a much softer tone than the initial button. Pointing over each icon will pop-up a bubble with the name of each social service.

      • 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.

      • 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.

      • 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 Flat Animated Menu

        A nice idea for an animated menu written in pure CSS. In order to make it work, simply hover over the "menu" button to see all the options come up with a lighting-fast movement. As you move the cursor over them, the selections will animate further to confirm they are active. 

      • Pure CSS3 Hover Vertical Menu

        A cool experiment generates a menu with a neat flat design and interesting animation effects. When hovered over, the items will perform a smooth transition as the corresponding icon spins around itself. Created by user Jitendra from CodePen using HTML and CSS.

      • 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.

      • CSS3 Circle Path Menu

        A beautifully styled CSS3 menu with animated circles. The idea is to have a big element floating around that releases smaller ones when we hover over it. While the process happens, the elements spin and move in an attractive manner thanks to the nicely applied transitions.

      • Animated CSS Ring Menu

        The CSS3 Ring Menu is just a simple unordered list with one superior link and four links as the list items. It activates on hover and uses a spiralling animation to show and hide the list elements. You can edit the code to improve its looks, functionality or even add effects.

      • 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.

      • Simple CSS Hover Marquee

        If you need to display a long line of text but don't have the necessary space, this little code snippet made in CSS can do wonders for you. It allows you to create a marquee that scrolls text on hover, gradually upping the speed as you keep it pressed. This pen was created by Ren Walker.

      • 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.

      • CSS Flat Calendar Template

        A CSS calendar design that originated from Dribbble and looks like some color-filled version of iOS 7, this cool calendar will allow us to schedule tasks at specific times of the day, conveniently marked with a red dot on their respective date. Simple, appealing and, above all, useful. Just the way we like it.

      • 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.

      • Navigation Dropdown With Unfold Effect

        Here we have a beautiful concept for a dropdown menu where the options unfold out of the main button like a piece of paper. Everything is styled with the power of CSS. The only downside we found was that the selections come down a bit too slowly, which may annoy some users.

      • 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.

      • CSS Rounded Social Icons

        A pretty trio of social buttons created with pure CSS, perfect to promote yourself through every corner of the net. These buttons animate slightly on hover, raising from their original positions a little bit in order to represent interactivity with the user. They come in different colors, depending on the website they are attached to.

      • 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.

      • Alternative Select Element CSS

        This cool Pepsized tutorial will show you a nice alternative to the common select from tag applying only pure CSS. It provides a simple and user-friendly result, including a subtle fade animation to show the options on hover. It is important, however, to add some fallback for mobile devices and/or IE8.

      • Simple CSS-only Breadcrumb

        A cool light gray breadcrumb that has been created just by using CSS3. It is a beautiful code experiment that lets you know where you are on the website, and also, guides you through it with the help of a relevant blue color on every level when the breadcrumb is hovered over.

      • 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.

      • Vertical jQuery & CSS Scroll Menu

        A scrolling menu created with jQuery and CSS. The menu has a very long list of elements on a medium sized box, which scrolls up and down as we hover on the respective section, all done with supremely smooth movements.

      • Responsive CSS Retina-Ready Menu

        An amazing menu that comes boosted with a number of very useful options that make it versatile and attractive. Is responsive design has three different layouts depending on the screen size, including a tablet-optimized version. Also, it is Retina-ready, this is achieved by using an icon font instead of images to avoid pixelation when zooming in.

      • 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).

      • CSS Flying Twitter Bird Follow Button

        An awesome little social button that allows you to link visitors to any given Twitter profile with a smart animated element. It starts with a simple Twitter bird located on the top corner of the screen, when the user hovers over it, the bird moves to open space to a "follow me" button, while it begins to move its wings in flying motion.

      • CSS Social Media Instant Titles

        Social media buttons bar for sharing, liking or following purposes. It displays tooltips on hover.

      • 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.

      • jQuery & CSS3 Related Posts Slide Out Bo...

        The idea behind this jQuery and CSS3 plugin is to show relevant posts that might've been lost with time. A list of related posts with their respective thumbnails comes out of the edge of the screen and a shuffle button on the bottom allows you to repopulate the list with new entries.

      • Vertical CSS3 Drop-down Menu

        A vertical menu design with only HTML and CSS3. It includes some new CSS properties that might only be supported with the latest browsers, so keep that in mind when implementing it. Also, it features an attractive set of animations and multi-level navigation.

      • CSS Twitter Button Concept

        A fantastic code snippet that provides a great way to promote your Twitter profile, attracting more followers and interactivity. The idea is to have a simple button with the Twitter logo and then make it animate whenever the visitors hover over it, revealing a button linking them to your desired profile.

      • 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.

      • Icon Fonts: CSS Social Count Meets Style

        A cool set of buttons to promote social sharing, carrying neat icon fonts and hover effects that allow the visitors to use their social credentials to tweet, like or +1 a piece of content. Everything is styled with the power of CSS3 by CodePen user Tim Pietrusky.

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

Done!

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

Browse
Done

Thank You!

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

Open bundle builder

Bundle Builder

0 elements selected | Clear all ×

Select the bundle you want to add the items to.

Search bundle (filter by name)
Create new bundle
×

Add new bundle

×

Edit bundle