10 Useful jQuery CSS3 Image Hover Effects 2014

CSSjQuery

by 0

envato

Those hover effects are perfect animation script on images and text. In here we have a collection of useful jQuery CSS3 Image Hover Effects which you can add some nice Image Hover Effect features to your website.

jquery-css3-image-hover-effects

Mouseover with jQuery is really very attractive for user to see your website. The CSS markup is commented and you will get also a documentation file to help you start working with these hover effects.
We hope you find something useful here for your project and please comment below if you have or know any CSS3 hover effects. Enjoy.

Scrollable Thumbs Menu with jQuery

Scrollable Thumbs Menu with jQuery

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.

MORE / INFO DEMO

Ideas for Subtle Hover Effects

Ideas for Subtle Hover Effects

Here are some creative ideas for grid item hover effects. It’s all about being subtle with that little delightful surprise. The techniques we are using for these hover effects involve 3D transforms and some pseudo-element transitions.

MORE / INFO DEMO

Bubbleriffic Image Gallery with jQuery

Bubbleriffic Image Gallery with jQuery

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.

MORE / INFO DEMO

Free CSS Triangle Image Crop Hover Effect Plugin

Free CSS Triangle Image Crop Hover Effect Plugin

 

MORE / INFO DEMO

Display Images with Shape Masking and Nifty Zoom Effect

Display Images with Shape Masking and Nifty Zoom Effect

Today we are going to show you how to mask images with shapes plus some nifty zoom animation effects with just HTML & CSS. I have seen this kind of styling and effect in many portfolio websites and let me show you how it’s made.

MORE / INFO DEMO

3D Thumbnail Hover Effects

3D Thumbnail Hover Effects

This is exciting 3D hover effects using CSS3 and jQuery.

MORE / INFO DEMO

Thumbnails Preview Slider with jQuery

Thumbnails Preview Slider with jQuery

MORE / INFO DEMO

Caption Hover Effects

Caption Hover Effects

The idea is to have a grid of figures and apply a hover effect to the items which will reveal a caption with the title, author and a link button. For some of the effects we will use 3D transforms. The aim is to keep the effects subtle and provide inspiration for many different variations.

MORE / INFO DEMO

Hover Slide Effect with jQuery

Hover Slide Effect with 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.

MORE / INFO DEMO

Simple yet amazing CSS3 border transition effects

Simple yet amazing CSS3 border transition effects

Some crazy effects with Border Transitions. Originally made by ksk1015. Pretty basic CSS3 code, but amazing output.

MORE / INFO DEMO

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>