Best jQuery Image Hover Effect Plugins & Tutorials with Demo

    Beautiful Slide Out Navigation: A CSS and jQuery Tutorial

    Beautiful Slide Out Navigation: A CSS and jQuery Tutorial

    I want to show you how to create an amazing slide out menu or navigation for your website. The navigation will be almost hidden – the items only slide out when the user hovers over the area next to them. This gives a beautiful effect and using this technique can spare you some space on your website. The items will be semi-transparent which means that content under them will not be completely hidden.

    Neat Photo Hover Effect with CSS Sprites and jQuery

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

    Collapsing Site Navigation with jQuery

    We will create a collapsing menu that contains vertical navigation bars and a slide out content area. When hovering over a menu item, an image slides down from the top and a submenu slides up from the bottom. Clicking on one of the submenu items will make the whole menu collapse like a card deck and the respective content area will slide out.

    Sweet Thumbnails Preview jQuery Gallery with Demo

    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 slid…

    B&W Box jQuery Gallery with Demo

    We created a little jQuery gallery that plays with the black and white versions of images. The idea is to have an initial grid-like view of the different categories or albums. In the background we can see the black an white version of the current image of the hovered album.