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 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 …
Best jQuery Image Hover Effect Plugins & Tutorials with Demo
Hotspotter : Hotspot Maker jQuery Plugin
Easily create amazing hotspots on your images with just point & click!
Features:
- Different Types of Spots & Tooltips
- UNIQUE & Amazing Aiming Effect!
- Tip & Bubble tooltips
- Change tooltip direction “top, bottom, right, left”
- Different tooltip animations
- Change tooltip position relative to spot
- Activate it on hover , click or make it always active
- Change spot border radius
- Make your spot point to a URL
- Add text or HTML content to tooltips
- Unobtrusive spots
- Create spots with your own images!
- Share your spots “have a direct link to it , when navigating to this link the browser window will scroll down to where the image is located & trigger spot”
- Fully Responsive
hoverOver : jQuery Plugin for Adding Hover Content
“hoverOver” plug-in is useful for showing content on image or text blocks to show short information related to product, image etc. Plug-in provides various animation effects to show content.
Features:
- Hover over content can be defined on text content or image
- You can define content text either in contentData or define data-content=’#contentID’ and define content inside Hover Content Goes Here
- 14 different animation styles
- 5 styles for show content e.g. fly, curtain, push, pull, tocenter/fromcenter
- Content can be half visible using contentShowHeight. (e.g. Can be used with “flytop” & “flybottom”)
Live Album Previews with CSS3 and jQuery
Today we are going to make a script for previewing the contents of an album with a slideshow-like animation. This can be used in photo galleries, online shops, profile pages and more. The example is inspired by Facebook, where you hover over an album and get a slideshow of some of the photos contained inside it.
jQuery My Fade Over Image
This plugin create a fading effect for image on mouse over. In addition, you can select a color tone filter for your images. The tone is set for the images, when they are not hovered. When it is hovered, the color tong filter will be removed, so that there is a clear distinction between this selected image and other non-selected images. You do not need to prepare multiple sets of images, also you can change the color tone using javascript.
spriteOnHover (Sprite on Hover) – jQuery plugin
spriteOnHover (Sprite on Hover) is a lightweight jQuery plugin designed to animate your sprite sheets on hover (duh).The spriteOnHover plugin will autodetect how many frames your sprite has, based on the orientation parameter, but it’s crucial that every frame has the exactly same size as the others. For now, multi-line sprites are not supported.
jQuery Sticky Captions Concept with CSS3
When creating thumbnail grids, we usually want to show image captions on hover to provide more information about the item. Image captions are usually shown in a very specific part of the thumbnail, either on the top, the middle or the bottom. When adding captions to the bottom of a thumbnail it can happen that a thumbnail that is overflowing the viewport (i.e. is partly beyond the “fold”) is being hovered but the caption won’t be seen because it appears on the bottom part of the image that is not visible. The user would have to scroll the page in order to see the bottom of the item and eventually the caption.
A small trick can solve that problem by simply making the caption “sticky”. This would mean that the caption will be visible not only at the bottom of every thumbnail but also in any place, sticking at the bottom of the page, if the thumbnail hovered is overflowing the current view.
