Wireframe – HTML
First set up an unordered list which we will use as our foundation for the list
of gallery images.
You will notice that each list will contain an image which is nested within a tag. The tag will be used to crop the image to only show its default state.
Styling – CSS
We will style this up as a typical gallery. Only thing unique about the below CSS is that we have the to crop our image as we demonstrated in the above example.
Step 3. Animation – jQuery
For those who are not familiar with jQuery, do check out their site first and get an overview of how it works. I’ve shared a few tricks that I have picked up along the way, you can check those out as well.
Initial Step – Call the jQuery file
You can choose to download the file from the jQuery site, or you can use this one hosted on Google.
The logic here will be to fade out the default thumbnail, and set a background image on the tag. Using CSS Sprites, we will position the image to the ‘bottom’ so the greyscaled thumbnail can seep through on hover over.
The following script contains comments explaining which jQuery actions are being performed.
- jQuery Captify Simple Animated Image Captions
- CSS Image Switcher
- Standard zoom(jquery)
- jQuery virtual tour
- Animated InnerFade with JQuery
- A jQuery plugin for displaying images with Flash-like zooming effects
- Photo Zoom Out Effect with jQuery
- Filter Image View Using jQuery
- a jQuery Image Scroller
- Amazon Books Widget with jQuery and XML Image Scroller
Recommended Web Hosting For Bloggers and Designers
I recoomended Webhostings for Bloggers and Designers because I am freelancer, working with thousand clients in the worlds. Most of them will use those hosts.
- Fast, Reliable, Affordable
- 100% Satisfaction Guarantee
- And More...