jQuery Slideshow Tip Cards Free Hover Effect
Modern browsers such as Chrome, Firefox, and Safari on desktop have been tested. I have not tested this on IE.Tip Cards plugin let you create a layout of cards with a card-like interaction that you see on Google Tips Page. I’ve also added several new animation options so that you can personalize it to your own liking.
To add this to your website, all you have to do is include the latest jQuery library together withjquery.tip_cards.js and tip_cards.css into your document’s , and follow the HTML markup as shown below.
MORE / INFO DEMO
Animation CSS3 3D Grid jQuery Hover Effect
It’s the recreation of an effect we spotted inthis fantastic prototype app by Marcus Eckert. The idea is to rotate a grid item in 3D, expand it into fullscreen and reveal some content. For our attempt to imitate the app behavior, we created two demos. In the first one we rotate the grid item vertically and in the second one horizontally.MORE / INFO DEMO
Ecommerce Product Display Free CSS Hover Effect
Using standard widths and floats instead of css columns so that it will work in all browsers.MORE / INFO
3D Grid Free jQuery CSS Hover Effect
A proof-of-concept effect recreation of the animation seen in a prototype app by Marcus Eckert. The idea is to flip a grid item in 3D, expand it to fullscreen and reveal some associated content. We’ve created two demos with a vertical and a horizontal rotation.MORE / INFO DEMO
Playing with CSS3 Animations
The example described below is the first of four demos, all of which are using the same JS file, CSS class names, and are based on the same operating principles. All demos have been tested on Chrome, Safari, Firefox, Opera, IE11 and IE10 (also on iOS). They are not intended for production; they are simply provided as tangible case studies. Additionally, you may have to implement some fallbacks for users (especially those using old IE browsers), something beyond the scope of this article.MORE / INFO DEMO
Social Mosaic Wall Hover Effect
Only HTML and CSS – easily editable (no javascript).Unique and beautiful design.
28 Social icons includes.
1 x PSD file with social icons (so you can create new).
Set how many tiles you want eg. 4×3 or 100×300 or …..
Put whatever you want into any tile: social icons, text (as long as you want) and graphics, video and animation.
MORE / INFO DEMO
Original CSS3 Hover Effects
You can use the product list or image list for your website.You can easily use this effects.Pure CSS
Without JavaScript or jQuery
Easy to use and customize
Zoom In / Zoom Out
Rotate Right / Left
Rotate / Scale
Rotate X / Rotate Y / Rotate Z
Image Opacity
Layer Hover
Transition
MORE / INFO DEMO
Simple Stack Free CSS Hover Effects
A set of simple stack effects for inspiration. The main idea is to have one item shown initially and then, on some trigger, more items are revealed as decoration. As seen in image grids or on scroll websites as creative effect.MORE / INFO DEMO
Portfolio Wall HTML CSS jQuery Hover Effect
Portfolio Wall | Joomla module 2.x 3.x is a module which make you can create wall of your works or clients or team or any thing other as you want, with an awesome 3d hover effectMORE / INFO DEMO
Nautilus SCSS/HAML hover effects
My HAML/SCSS version of http://codepen.io/indec/pen/gioqx by Ian Malpass with some added hover effects. -ZachMORE / INFO
Border Effect
MORE / INFO
Hyena v1.2 Hover Effect for GIFs
Hyena offers a lightweight, responsive and high-performance solution to easily adding media controls and additional interaction to Animated GIFs. Just add class=”hyena” to your Animated GIFs and Hyena does the rest. From there you can optionally configure Events, Animation Effects, Media Controls, Skins and much more.MORE / INFO DEMO
Pure CSS3 Image Hover Effects
Pure CSS3 Image Hover Effects is 30 Pure image hover effects which is suitable for portfolio, image gallery and much more. Its support major browser. You can easily use this effects. I have just give you ideas about effects you can develop more creative from this effects.MORE / INFO DEMO
Hover Effects Pack jQuery Gallery Plugin
This hover pack allows you to add animation effects to images, when it hovered. Also you have ability to add text, that will go over image, and this text also can be animated. In this pack you can find 10 image animation effects and 10 animation effects for text, that goes over image. Also you can combine several text animation effects for one item.MORE / INFO DEMO
Free Image Hover Effect
Icy is a clean and elegant blogger template with Post Formats. Special thanks to ‘Artur Biernacki’ Wildweblab’s owner for allowing us to release blogger template version of Icy template. Icy blogger theme is a surprise for all those bloggers, who were anxiously waiting for another elegant responsive template. Responsive layout and Retina ready icons and images makes this template look more beautiful on any device. This Grid style template is easy to use, with responsive slider and responsive related post area.MORE / INFO
Hover Effects Pack – WordPress Plugin
This hover effects pack plugin allows you to add image via shortcode, and set hover animation, text animation and text delay. This plugin adds new button to you WYSIWYG editor and options page, where you can select colors for color layer and text.MORE / INFO DEMO
SVG Hover Effect
MORE / INFO
jQuery Hover Effect Plugins (Premium)
This hover pack allows you to add animation effects to images, when it hovered. Also you have ability to add text, that will go over image, and this text also can be animated. In this pack you can find 5 image animation effects and 6 animation effects for text, that goes over image. Also you can combine several text animation effects for one item.MORE / INFO DEMO
Hover.css – A Collection of CSS3 Hover Effects
Hover.css is a collection of CSS3 powered hover effects to be applied to call to actions, buttons, logos, featured images and so on.Easily apply to your own elements, modify or just use for inspiration.
Available in CSS and SASS.
A repository by IanLunn.
MORE / INFO
Shape Hover Effect With SVG
In this tutorial you ll create really cool hover effect.You ll be using SVG for the shape and Snap.svg for animating it on hover.
The idea is to create a SVG with one path that represents the shape background for some caption and to morph that path into another one on hover.
MORE / INFO DEMO
Animated Opening Type CSS Hover Effect
A tutorial on how to create an interesting animated 3D opening type effect with pseudo-elements, CSS transforms and transitions. The idea is based on Edenspiekermann’s Open Type project and it’s a very creative way to display and play with letters.MORE / INFO DEMO
Animations for Thumbnail Grids Hover Effect
There are many parts of a website where we can apply nice transitions to make things more interesting. Images are certainly great entities for playing with fancy effects and today we’d like to show you some inspiration for thumbnail effects using CSS animations.MORE / INFO DEMO
Pentagon Hover Effect with CSS3 and jQuery
A tutorial about Creating Pentagon Hover Effect by using CSS3 and jQuery. It smoothly meshes together a rotate effect with a slight nudge right to the image along with a colorization of the image.MORE / INFO DEMO
CSS Powered Buttons with Hover Effect Tooltips
Here is another social media buttons we did earlier today, you can add them to you next project, I’m only using social media button as an example, you can pretty much use them for any purposes.From the image you probably noticed the tool tip effect, check out the demo to see the button in action.
MORE / INFO DEMO
KoalaZoom jQuery Hover Effect Plugin v1.0
This plugin makes images in an unordered list to zoom in on mouse hover and displays relative information.KoalaZoom was created in just a few hours. I’m planning on adding more effects and options in the next version.
MORE / INFO DEMO
Long Shadow jQuery Plugin
The long shadows jQuery plugin allows you to add fully customizable long shadow effects to your web design elements.MORE / INFO DEMO
CSS Pricing Tables with Hover Effect
Easy to use the beautiful and colorful Pricing Tables for their own website. Simply insert into the existing CSS file and enjoy the new Pricing Tables. Created with rounded corner, box-shadow and nice hover effects. It degrades nicely on older browsers, e.g. IE7 and IE8.MORE / INFO DEMO
Stretch Gallery
Stretch Gallery is a XML Canvas Gallery that allows you to create a nice portfolio gallery with some nice effects and customization settings.MORE / INFO DEMO
CSS3 Image – Text Hover Effects (Premium)
css3-image-text-hover-effects/4884787?ref=janecross" class="moredemo" target="_blank">MORE / INFO DEMO
Advanced CSS3 Hover Effects 5 w/ Banners (Premium)
More Advance Hover Effects with new hover effects using CSS3 keyframes, filters, transitions along with transition and animation delays to help with a timing structure. The images that are used are sprite images. Very easy to use, alter and ready to go. There is no JavaScript and no JQuery in the code only CSS3 and HTML.MORE / INFO DEMO
CSS3 – ZSquare Animated Web Profile (Premium)
An animated web profile with smooth animations to showcase yourself on the web, developed only with CSS2, CSS3 & HTML (No Java Script!).MORE / INFO DEMO
Captions (Premium)
Captions gives your images (and videos) a HTML5 caption with a smooth CSS3 effect.MORE / INFO DEMO
CSS3 Vinyl With Case and Cover
Complex Vinyl with detailed Case with pure CSS3 Hover Animation. There are two animations taking place at the same time, one of which is the translation of the disc and the other one is the rotation of it. The former is handled by the transition property while the latter is handled by the animation and keyframes properties.MORE / INFO
Transforming New Microsoft Logo Into Windows 8 Logo
We’ll create the new MS logo and make it transform into the Windows 8 logo on hover using CSS3 3D transforms.MORE / INFO
Tile transition effects
4 different effects on tiles, showing a hidden link on hovering.MORE / INFO
Flat Folio
A simple flat portfolio style that doesn’t suck. Saw a similar style on a theme and had to re-create it. Added some animate.css by Dan Eden and a hover effect.MORE / INFO
CSS3 Logo Hover Transitions
Modern and great css3 hover logo hover transitions.MORE / INFO
Responsive List + Flip Effect
Hover or Click each element to see flip and bounceInLeft Effects.MORE / INFO
Css version of macbook dribbble
MORE / INFO DEMO
Twitter Widget
MORE / INFO
Tiles with animated :hover
Interaction test for a tile based design.MORE / INFO DEMO
Follow the kitty
Simple effect for roll over on grids, where the content slides based on the previous position.You can see also in use here: http://worldbakingday.com
Libraries: jQuery and jQuery.transit
MORE / INFO DEMO
Bounce On Hover
When you hove the image, the border bounces.MORE / INFO DEMO
Text Revel on Hover: Corner Triangle Slide Overlay
I’m trying to come up with ideas for my new site’s homepage and “mem”. Just testing out another hover technique. -David LeiningerMORE / INFO DEMO
Gallery hover expand
Hover/expand functionality for horizontal oriented images.Images will expand after 1.5 seconds (can be changed based on 0.5 second intervals)
MORE / INFO DEMO
Hover Animation from UNIQLO
Only they use an animated GIF and this is CSS only. Would have like to not do the extra div for the hover, but there is no background-opacity…MORE / INFO DEMO
WordPress Speedo Popup – Lightbox
Speedo popup is a small, powerful and real customizable WordPress popup / modal plugin.MORE / INFO DEMO
Animated Books
A creative way to show interactive books using CSS 3D Transforms.MORE / INFO DEMO
Flat Responsive Sliding Boxes
Flat Responsive Sliding Boxes using HTML5 and CSS3.MORE / INFO
Social buttons with hover
Cool social buttons with awesome slide hover (pure css animation)MORE / INFO DEMO
CSS3 Transitions
MORE / INFO
WP Teamer
WP Teamer helps you set up a neat team page. The whole thing is made responsive with bootstrap.MORE / INFO DEMO
Direction-Aware Hover Effect
CSS3D-ish & bits of JS.MORE / INFO
Loading Effects for Grid Items with CSS Animations
Some inspiration for loading effects of grid items using CSS animations.MORE / INFO DEMO
Dynamic Grid with Transitions
A dynamic grid layout that let’s you choose how many rows and columns of items are shown. Partly based on the visualization of Google Trends, except that you can add transitions.MORE / INFO DEMO
Responsive Icon Grid
A responsive grid of anchors with icons, text and some example hover transitions.MORE / INFO DEMO
Playground
MORE / INFO
Using CSS3 Animations to Build a Sleek Box UI
MORE / INFO
Sharing menus
An icon button set that makes your the content stand out. Hover to see it in action.Aside from the icons, all other content are CSS3 or base64 images.
MORE / INFO
Iconic Buttons
An icon button set that makes your the content stand out. Hover to see it in action.Aside from the icons, all other content are CSS3 or base64 images.
MORE / INFO
Dribbble member card concept
A Dribbble member card concept, with infinite shits slider in full CSS.MORE / INFO
Profile Expand
MORE / INFO
Dynamic Product Item Thumbnail Hover Effect
This is made width both Css and Javascript, though the javascript is only for activating the menu.The additional info loading up when hover is made purely with css, and is “dynamic” so it will expand upwards with whatever content is put there.
MORE / INFO DEMO
Emma Boxes
This plugin aims for displaying different types of content. Actually, you can choose which content do you want to display. Make some custom content and show them. Maybe the most interesting is the fact that this plugin is specially optimized for showing woocommerce content. Anyway, the purpose of this plugin is to dynamically create a lot of interesting content which is easily embeddable.MORE / INFO DEMO
Percentage Skills Bar
Percentage bars flat style.MORE / INFO
Adaptive Thumbnail Pile Effect with Automatic Grouping
An experimental jQuery plugin that will group thumbnails by a shared data-attribute into a pile. When clicking on the pile, the thumbnails that belong to that pile will be spread into a grid using CSS transitions.MORE / INFO DEMO
Flipping Circle Slideshow
A simple circular slideshow where we flip the image in order to navigate.MORE / INFO DEMO
Interactive Infographic with SVG and CSS Animations
Learn how to build an interactive animated infographic using SVG, CSS and JavaScript.MORE / INFO DEMO
Responsive CSS Timeline with 3D Effect
A tutorial about how to create an experimental CSS-only timeline with a 3D effect. The idea is to expand a content area when the associated radio input is selected..MORE / INFO DEMO
Thumbnail Grid with Expanding Preview
A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.MORE / INFO DEMO
App Showcase with Grid Overlay
A tutorial about creating a simple grid overlay with subtle transitions for an app showcase.MORE / INFO DEMO
BookBlock Revised
The content flip plugin BookBlock has been updated and improved. Content can be flipped vertically and horizontally, and we’ve added support for RTL among other things.MORE / INFO DEMO
PFold: Paper-Like Unfolding Effect
A highly experimental jQuery plugin that let’s you unfold elements to reveal more content just like on a piece of paper. Unfolding directions and number of steps can be specified.MORE / INFO DEMO
Simple Icon Hover Effects
A set of simple round icon hover effects with CSS transitions and animations for your inspiration.MORE / INFO DEMO
Animated Responsive Image Grid
A jQuery plugin for creating a responsive image grid that will switch images using different animations and timings. This can work nicely as a background or decorative element of a website since we can randomize the appearance of new images and their transitions.MORE / INFO DEMO
Image Notes for WordPress
Image Notes for WordPress is a plugin to add notes on images. It is similar to tagging in Facebook or Flickr. Use this plugin to tag your friends in your post, Label important areas of an image, add explanations over a chart, List out recipie ingredients in an image.MORE / INFO DEMO
CSS3 Rounded Image With jQuery
The other day I was trying to style CSS3 border-radius to image element and I realized that Firefox doesn’t display border-radius on images. Then I figured a way to work around it — wrap a span tag around with the original image as a background-image. Thanks to Darcy Clarke for the jQuery code which does the magic tag wrapping automatically.MORE / INFO DEMO
Animated Skills Diagram with Raphaël
In this tutorial we will show you how to create a diagram using Raphaël – a small JavaScript library that is great for working with vector graphics. The idea is very simple: we will draw some arcs using mathematical functions and we’ll be displaying a skill percentage in a main circle when we hover over those arcs.Let’s start with the markup.
MORE / INFO DEMO
Beautiful Image Hover Effects with jQuery/CSS3
Today we are glad to show you two beautiful image hover effects with jquery and CSS3. This example1 we want to show you, jquery hover effect using animation opacity transform color and the example2 you will see classic effect using zoom overlay using jquery and css.MORE / INFO DEMO
Sliding Boxes and Captions with jQuery
Add an extra layer of information to your images with sliding boxes.MORE / INFO DEMO
jQuery Zoom
A plugin to enlarge images on click or mouseover.MORE / INFO DOWNLOAD
ImageLens – A jQuery plug-in for Lens Effect Image Zooming
was searching a good jQuery plug-in for image zooming but couldn’t find any which was matching my criteria. I need the lens effect while zooming images and it should work without much plumbing. So, I decided to create one and now sharing this with everyone.MORE / INFO DEMO
CSS3 Transition
Using an image sprite, and css transitions, the image will change on hoverMORE / INFO DEMO
CSS Map hover ping
MORE / INFO DEMO
Hover Zoom Effect with jQuery and CSS
Recently I’ve been prototyping some interactive thumbnail effects for various projects. I’d like to share one of the effects with you and how I built it. It’s a nice looking effect that I’m calling “hover zoom” because it’s pretty self explanatory. I’ve seen similar effects to this one on a few sites here and there, and they were always built in Flash. I wanted a CSS and Javascript solution so I whipped up the Hover Zoom effect.MORE / INFO DEMO
Awesome jQuery image Swish Zoom Hover Effect
With this plugin you can add a zoom style effect to your images on hover, also you can add an overlay to it (What you tend to see on a lot of themes with lightboxes). You can also adjust all the settings it comes with (refer to usage in the index.html header). It’s really simple to setup, if you get into any trouble with it do let me know and I’ll do my best to help you out.MORE / INFO DEMO
Adipoli jQuery Plugin
Adipoli is a simple jQuery plugin used to bring stylish image hover effects. There are over 20 transition effects (popout, sliceDown, sliceUp, fold, boxRain, boxRainGrow and etc…) you can choose from. You can also select the start effects, like transparent, normal, overlay and grayscale. It is released under MIT License.MORE / INFO DEMO
GRG Responsive Grid
Responsive grid without masonry (light on Javascript). Requires square or 2:3 scale tiles (“tall” class).By Olex, Señor Developer at BIG HUMAN
MORE / INFO DEMO
Rift.js
Took a few minutes today to write up a little plugin for all your caption-revealing needs. I’d be honored for you to use it, just let me know what you made!MORE / INFO DEMO
Fancy Hover Effect with jQuery
MORE / INFO DEMO
3D CSS icon/label spin effect
Just a really nice way of hiding a label behind an icon/image and then revealing the label on hover.MORE / INFO DEMO
Hover Animation For Image Descriptions
This animation is my attempt to recreate the effect I saw in the WowWay WordPress theme for a project I’m working on. It starts with gray images. When you hover over an image, you have simultaneously the color image sliding up and a div with a text description sliding down.MORE / INFO DEMO
Redesign
Finally got around to redesigning my website.MORE / INFO DEMO
Caption Hover Effects
A tutorial on how to create some subtle and modern caption hover effects.MORE / INFO DEMO
JackBox – Responsive Lightbox
A tutorial on how to create some subtle and modern caption hover effects.MORE / INFO DOWNLOAD
Responsive Hover Descriptions
A test of different styles that can be applied to scalable product images to show the product’s information.MORE / INFO DOWNLOAD
Fast pseudo-perspective on hover
This is an effect from bighuman.com — but sped up by eliminating some “transition:” CSS which was glitching up the browser with javascript’s quick updates.MORE / INFO DOWNLOAD
Image Highlighting and Preview with jQuery
In this tutorial we will show you how to highlight and preview images that are integrated in an article or spread over a page. This is a nice way to allow users to view a bigger version of an image that is relevant to some context.MORE / INFO DEMO
Bounce Effect
Simple bounce effect made with css3 keyframe animationMORE / INFO DOWNLOAD
Magnifying glass for image zoom using Jquery and CSS3
Learn to make a realistic magnifying glass using Jquery and CSS3. Hover above the image to see the action.The code uses CSS3 box-shadow and border-radius properties to create the magnifying glass. Jquery is used to position it at the cursor coordinates and change the background position accordingly.
Moving the cursor away from the image gently fades out the magnifying glass bringing the image back to the default state.
MORE / INFO DEMO
Pretty Hover Effects with CSS and jQuery
This article will show you how to create pretty hover effects for your images using jQuery and CSS. The plan is to use a clean mark up, adding the necessary elements on the fly. What this means is that we are starting from barebones image HTML tags, with title attributes only. This can come useful especially if you already have hundreds of images that you want to apply this effect on.MORE / INFO DEMO
Hexagons with Hover Effect
This is the demo for my blog post about how I build the image hexagons + hover effects on my new website.MORE / INFO DEMO
CSS3 Image – Text Hover Effects
8 Standard Background Animations.Multiple Background Animation in 1 Hover.
More than 15 Background Combinations.
14 Text Effects.
2 Background colors. (Light and Dark).
MORE / INFO DEMO
Circle Hover Effects with CSS Transitions
In today’s tutorial we’ll experiment with hover effects on circles. Since we have the border radius property, we can create circular shapes and they have been appearing more often as design elements in websites. One use that I especially enjoy seeing is the circular thumbnail which just looks so much more interesting than the usual rectangular. And because the circle is such a special shape, we are going to create some special hover effects for it!MORE / INFO DEMO
Direction-Aware Hover Effect with CSS3 and jQuery
In today’s tip we’ll show you how to create a direction-aware hover effect using some CSS3 goodness and jQuery. The idea is to have a little overlay slide in on top of some thumbnails from the direction that we are coming from with the mouse. When we “leave” the element, the overlay will slide out to that direction, following our mouse. This will create an interesting-looking effect.MORE / INFO DEMO
Pure CSS3 Vertical menu with nice hover effect
Vertical menu used font icon and nice hover effect. Thanks CSS3MORE / INFO DEMO
Filter Functionality with CSS3
Using the general sibling combinator and the :checked pseudo-class, we can toggle states of other elements by checking a checkbox or a radio button. In this tutorial we will be exploring those CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type.The idea is inspired by Roman Komarov’s brilliant “Filtering elements without JS” experiment where he uses checkboxes and radio buttons for filtering colored shapes.
The beautiful Dribbble shots used in the demos are by Mike from Creative Mints.
MORE / INFO DEMO
Responsive Pricing Table with Neat Hover States
Anyone else getting a text squishing/snapping effect upon mouse hover? It seems unintentional.MORE / INFO DEMO
Thumbnail Proximity Effect with jQuery and CSS3
Today we want to show you how to create a neat thumbnail proximity effect with jQuery. The idea is to scale thumbnails when hovering over them and also scale their neighbouring thumbnails proportionally to their distance. We’ll also make a description appear.This is based on a request we once got from a reader who asked if the effect on http://porscheeveryday.com/ could be achieved with jQuery. This is our attempt to recreate the basics of that effect.
We will be using the jQuery Proximity plugin by James Padolsey.
The illustations in the demos are by Florian Nicolle and they are licensed under the Creative Commons Attribution-NonCommercial 3.0 Unported License.
MORE / INFO DEMO
CSS3 Lightbox
Today we want to show you how to create a neat lightbox effect using only CSS. The idea is to have some thumbnails that are clickable, and once clicked, the respective large image is shown. Using CSS transitions and animations, we can make the large image appear in a fancy way.With the help of the pseudo-class :target, we will be able to show the lightbox images and navigate through them.
The beautiful images are by Joanna Kustra and they are licensed under the Attribution-NonCommercial 3.0 Unported Creative Commons License.
Please note that this will only work with browsers that support the :target pseudo class.
Let’s do it!
MORE / INFO DEMO
Hover and Click Trigger for Circular Elements with jQuery
Applying a :hover pseudo-class to an element is widely known as the classic “hovering” over an element on a web page. A problem that arose with the introduction of the border-radius property is the non-realistic triggering of the hover event when entering the bounding box of the element and not just the actual visible area. This becomes extreme when we create a circle by setting the border-radius of a square to 50% (half of its outer width and height).Today we want to share one possible solution to the circle hovering problem. We’ll create a plugin that will take care of the ‘mouseenter’, ‘mouseleave’ and ‘click’ events to be triggered only on the circular shape of the element and not its bounding box.
MORE / INFO DEMO
Original Hover Effects with CSS3
The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative way. We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example.Please note that this will only work properly in modern browsers that support the CSS3 properties in use.
MORE / INFO DEMO
Thumbnails Preview Slider with jQuery
In this tutorial we will show you how to create and use a thumbnails preview slider with jQuery. Since we got a lot of requests to show how to make the preview slider work separately from the full image view, we decided to make a tutorial on how to use the little thumbnails preview part only.Check out the Sweet Thumbnails Preview Gallery where me make use of the thumbnails slider idea.
The images are by talented tibchris and you can find them on his Flickr photostream:
tibchris’ photostream
So, let’s start with the markup.
MORE / INFO DEMO
Sweet Thumbnails Preview Gallery
In this tutorial we will create an image gallery with jQuery that shows a preview of each image as a little thumbnail. The idea is to hover over the slider dots and make the regarding thumbnail slide into the previewer. When clicking a slider dot, the full image will slide in from the right or left side, depending on the currently viewed image.Update: If you are interested in integrating the thumbnails preview slider you might want to check out the new post on how to use only the preview part:
Thumbnails Preview Slider with jQuery
The beautiful images are by talented geishaboy500 and can be found here on his Flickr Photostream.
So, let’s roll!
MORE / INFO DEMO
Bubbleriffic Image Gallery with jQuery
In this tutorial we will create a bubbly image gallery that shows your images in a unique way. The idea is to show the thumbnails of albums in a rounded fashion allowing the user to scroll them automatically by moving the mouse. Clicking on a thumbnail will zoom in a big circle and the full image which will be automatically resized to fit into the screen. Navigating through the images will slide the current image to the side and make the new one appear in a zoom like fashion.We will be using Manos Malihu’s brilliant thumbnail scroller which you can find here: Manos Malihu’s thumbnail scroller
The beautiful images are by talented geishaboy500 and you can find more amazing photographs on his flickr photostream:
Photos by geishaboy500
Ok, let’s get started!
MORE / INFO DEMO
Hover Slide Effect with jQuery
Today we will create a neat effect with some images using jQuery. The main idea is to have an image area with several images that slide out when we hover over them, revealing other images. The sliding effect will be random, i.e. the images will slide to the top or bottom, left or right, fading out or not. When we click on any area, all areas will slide their images out.The idea is based on the beautiful Flash based animation on the Yumaki website.
So, let’s start.
MORE / INFO DEMO
Scrollable Thumbs Menu with jQuery
In this tutorial we will create a fixed menu with scrollable thumbs. The idea is to have a menu fixed to the bottom of the page and let a vertical stack of thumbs appear when hovering over a menu item. The thumbs are scrollable by moving the mouse up and down which makes a really nice effect. We will add some CSS3 properties for spicing up the looks.We will base our jQuery code on the Vertical Scrolling Menu of Andrew Valums.
The images used in the demo are from the incredible fashion photo collection by kk+ on flickr.
So let’s get started!
MORE / INFO DEMO
3D Thumbnail Hover Effects
Today we want to show you how to create some exciting 3D hover effects using CSS3 and jQuery. This idea is inspired by the cool hover effect that you can find on the page of the Google SketchUp Showcase.In our examples, we’ll use thumbails that will reveal some MORE / INFOrmation on hover. We will create a structure with jQuery that will allow making the image appear as folded or bended when we hover over it. For the hover effects we will use CSS 3D transforms.
MORE / INFO DEMO
Auto Post Thumbnail PRO
Auto Post Thumbnail PRO is a plugin to generate Featured Image (AKA Post Thumbnail) from first image in a post or any custom post type. The plugin will also create thumbnails from several popular Video services if it finds a Video embedded in the post.MORE / INFO DEMO
Social Image Hover for WordPress
Social Image Hover for WordPress combines all of the web’s most popular social services into one easy to use plugin. Social Image Hover allows you to quickly and easily add hover-over social buttons to your images on-the-fly making them instantly “shareable” on Pinterest, Facebook, Twitter, and Google Plus. Even better, the hover effects are silky smooth, cross browser, and come with multiple overlay images!MORE / INFO DEMO
Photo Zoom Out Effect with jQuery
Today we will show you how to create a simple image zoom out effect with jQuery. The idea is show some images which are zoomed in initially and when hovering over an image it gets zoomed out. This effect could be used in photography websites or image galleries. Our example uses some black and white images to focus on the effect.Ok, let’s get started.
MORE / INFO DEMO
CSS button with hover effect
nspired by the nice DEMO button on the jquery homepage I created this button with a hover effect. It uses opacity options for all browsers. You can see a demo here: JButton Demo DEMO the zip with all the containing files here: JButton The style for the button consists of the following classes: a.jbutton{ background: …MORE / INFO DEMO
Plus Thumbnail Post Widget – Premium Plugin
DEMO DOWNLOAD
Image & Thumbail Hover Slider
Size of boxImage in box
URL what box will redirect to after click
Background color of box
Color of hover effect
Speed of hover effect
Most of it through instalation script
Feel free to post your feedback.
MORE / INFO DEMO
Mate Hover – jQuery Plugin
Mate Hover – is a jQuery plugin for image hover animations. You can change the appearance of pop-up elements. You can embed your icons, text etc.MORE / INFO DEMO
Photo Booth Strips with Lightbox
A tutorial about how to create some neat scrollable photo booth strips and integrate Lightbox 2 and customize it in order to make it responsive and touch-device friendly.MORE / INFO DEMO
Neat Photo Hover Effect with CSS Sprites and jQuery
Here is a very nice effect for photos or some black and white images. We are using some CSS sprites for the photos to create a darken effect when hovering over the images. This could also be used with other effects. The basic principle is to create the impression that the background gets darker when …MORE / INFO DEMO
jFade – jQuery Hover Effect
jFade is a jQuery plugin that allows you to easily add fade interaction to elements on your website! Adds a nice UI hover effect using nothing more than the images already on your page.With less than a dozen extra lines of code, you can easily control opacity fades when users hover over images. This can work for images (like in a portfolio), text, links, buttons, and anything you can put in a div.
Simply call the jade function in your header, and then add a class to each image you want to be included in the fade.
MORE / INFO DEMO
HoverUp – jQuery Plugin
HoverUp is a flexible, yet very lightweight, jQuery Plugin to easily add animated captions to pictures or other content.MORE / INFO DEMO
Zoome – jQuery Image Zoom Effect Plugin
Zoome is a jQuery plugin to help you zoom images with hover effect(grayscale,blur,transparent) and you can zoom-in or zoom-out use mousewheel.MORE / INFO DEMO
WP ThumbFx – Responsive jQuery Thumbnail Effects
Enrich your website experience with WPThumbFx, a WordPress jQuery animation plugin that brings your images and content in your articles to life. Create unique animated effects effortlessly without any knowledge of jQuery. All effects are responsive and adapt perfectly for all device resolutions like mobiles, tablets and desktops.MORE / INFO DEMO
ThumbFx – Responsive jQuery Thumbnail Effects
Enrich your website experience with ThumbFx, a jQuery animation plugin that brings your images and content to life. Create unique animated effects effortlessly without any knowledge of jQuery. All effects are responsive and adapt perfectly for all device resolutions like mobiles, tablets and desktops. Check out how awesome it is.MORE / INFO DEMO
HoverEx – jQuery image hover animation plugin
HoverEx is a jQuery plugin for image hover animations.It contains over 36 animations and prepared 18 hover animation templates.It also support for image zoom and slider effect.You can use it to create unique animated effects effortlessly without any knowledge of jQuery.Just make the needs html markup,it will wokr well for you.MORE / INFO DEMO
Anyhover Image Effects
WordPress Plugin – Anyhover Image Effects allows user to add multiple on hover effects to their images using standard WP media tool. This plugin has got 4 starting effects and 16 hover effects so in combination this plugin delivers users 64 cool effects for their images!MORE / INFO DEMO
IHC – Portfolio CSS3 Image Hover Caption
The CSS3 is amazing. This item contain a CSS3 portfolio styling with 15 animation types. No javascript, no image sprites. The source code is well commented and very easy to edit and understand.MORE / INFO DEMO
Social Image Hover for jQuery
Social Image Hover for jQuery combines all of the web’s most popular social services into one easy to use plugin. Social Image Hover allows you to quickly and easily add hover-over social buttons to your images on-the-fly making them instantly “shareable” on Pinterest, Facebook, Twitter, Google Plus, Reddit, and more. Even better, the hover effects are silky smooth, cross browser, and come in multiple styles!MORE / INFO DEMO
WP Easy Social Hover Plugin
WordPress Plugin – Easy Social Hover allows users to add multiple on hover effects with Social Network Sharing buttons to their images using standard WP media tool. Add Facebook Share, Twitter, Pinterest, LinkedIn and GooglePlus sharing to your Images with a Style! This plugin will enable your visitors to easily and simply share your images over major social networks!MORE / INFO DEMO
jQuery Hover Cards
jQuery Hover Cards is a lightweight plugin that gives you the power to create beautiful and interactive hover effects for your images and thumbnails the differ depending on the direction the image was hovered.The images used in the demo are from Ultra Bokeh on Flickr.
MORE / INFO DEMO
Zalki Hover Image – Plugin jQuery
Zalki Hover Img – is a jQuery plugin for image hover animations. Cross browser even IE 7 (even opacity).Easy to use and customize. Supports thirty animation effects from jQuery Easing. No need to adjust the size of the container. The plugin will determine the size of your photos and will automatically adjust the settings, even if on the same page there are photos of various sizes.You can disable this function. You can change the appearance of pop-up elements. You can embed your icons, you can adjust the speed of the animation, you can change the color, shape, size …MORE / INFO DEMO
Picanim – jQuery image hover effect pulgin
Picanim is jQuery plugin used to bring stylish image hovereffects,it contains more than 27+
unique hover effects and more comming soon.Browser Support:IE(even
ie6),Firefox,Opera,Safari,Google Chrome.
MORE / INFO DEMO
Killer CSS3 Image Hover Effects
22 Different Image hover effects using just CSS3 . These effects will give your images and thumbnails a unique and modern effect.Integrating the effects is simple and straight forward. Each effect has a lightbox option where all the code needed for integration resides.
Modifying the effects and integrating two or more effects together is simple.
MORE / INFO DEMO
CSS3 Image Hover Effects Vol.2
After the success of my CSS3 Image Hover Effects, this new set of more advanced 14 effects contains a full range of awesome stuff to showcase your work in a modern and different way.Each effect comes with variants and in a separate HTML file and the documentation file will help you to integrate them on your website.
MORE / INFO DEMO
jQuery CSS3 Image Hover Effects
CSS3 Image Hover Effects is a jQuery plugin by Fusiondevs.com for adding superb hover effects to your website’s images. Perfect for using on banners, advertisements and custom buttons.MORE / INFO DEMO
CSS3 Hover Pack
This CSS3 Hover pack contains more than 20 examples of Hover Effects. Few single effects and more combinations to boost creativity. All effects simulate flash and javascript with pure CSS3 . Each effect on each css and html files.MORE / INFO DEMO
Advanced CSS3 Hover Effects 4
More Advance Hover Effects with 10 new hover effects using CSS3 keyframes, filters, transitions along with transition and animation delays to help with a timing structure. Very easy to use, alter and ready to go. There is no JavaScript and no JQuery in the code only CSS3 and HTML.In these hover effects I use different ways to use Google Maps, Forms and CSS3 Gradients.
As a note: These work in most updated browsers and can guarantee that it works for IE8 and IE7.
If you could please help rate my items that would be great.
MORE / INFO DEMO
Hover Effects
Easy hover effects that is all CSS3 and no javascript. There are 12 different options to choose from, some hover effects are integrated within others to show the simplicity on how to use these hover effects. There are descriptions in the code to help understand what I used and how to use and modify the code.MORE / INFO DEMO
CSS3 Image Hover Effects
This set of 17 Image Hover Effects uses some of the best and newest CSS3 features to showcase your images in a unique way.Each effect comes with variants and in a separate HTML file and the documentation file will help you to integrate them on your website.
MORE / INFO DEMO
Advance Hover Effects
Part 2 of the CSS3 hover effects. This one uses new transitions and different coding. 12 different examples with different effects and transitions. All shapes are CSS3 and not images.Also the first animation on the video demo will not work with Google Chrome or Opera. But the other 11 work perfect with all updated browsers.
This will only work with updated browsers, IE8 and IE7 is a no go.
MORE / INFO DEMO
Quotes Rotator
A simple automatic quotes rotator with progress bar and example media query.MORE / INFO DEMO
Putting CSS Clip to Work: Expanding Overlay Effect
A tutorial about how to create a simple expanding overlay effect using the CSS clip property and CSS transitions.MORE / INFO DEMO
