1. 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.
Today we are going to use jQuery and CSS3 rotations, along with the jQuery rotate plugin, to create a beautiful slideshow. You can use it to spice up your web sites, product pages and other projects with some CSS3 magic.
[download id=”34746″]| View demo | Link Site
4. Create a Slide-out Panel at the Top of Your Website Using jQuery
In this tutorial we’ll show you how to create a panel with slide-out content at the top of you page (like the one in this page) using jQuery. It is required that you have basic knowledge in HTML, CSS and jQuery to complete the tutorial.
This is using CSS3 transitions and transforms, so browser compatibility should be something like: Safari 3+, Firefox 4+, Opera 10+, Chrome Whatever+
The gallery will contain a scroller for thumbnails and a content area where we will display details about the portfolio item. The image can be enlarged by clicking on it, making it appear as an overlay.
The idea is to animate the content elements whenever a thumbnail is clicked. We will animate the heading from the top, fade out the previous image and slide the descriptions from the sides.
Compatibility Works great on the following browsers:, Firefox 3.5, IE 8, IE 7, IE 6 (imagine my surprise!), Opera 10, Chrome 4, Safari 4
[download id=”34758″]| View demo
10. Making Better Select Elements with jQuery and CSS3
This is why, today we are building a script that is going to take an ordinary select element, and replace it with a better looking, markup powered version, while keeping all the functionality intact.