how-to-create-a-jquery-rollover-like-the-one-on-dribbble-com.md

title	authors	intro	types	categories	published	updated	status
How to create a jQuery rollover like the one on Dribbble.com	thebeebs	[![owlScrollOver](images/0652.owlScrollOver_6E08A7...	shorts	javascript jquery	2010/11/14 12:00:00	2010/11/14 13:00:00	archived

I took a look at http://dribbble.com/ last night and noticed a simple yet effective treatment that they put on their pictures. If you scroll the mouse over them you get a subtle overlay fade in over the image to give you more information.

 

Click here for a demo

 

Step 1

First we need to add a reference to jQuery 1.4.4.

</!-->

Step 2

Add the HTML mark-up for the pictures. I have added a DIV with a class called poloroid (I've just realised that should have been spelt polaroid, whoops), this contains the Image, and a DIV with the class name overlay. This overlay contain 3 tags a H2, H3 and a H4 which will hold the title, information and date respectively.
</!-->

Step 3

Next up add the CSS to style the content and make it look like a polaroid. There is nothing worth mentioning here other than the fact that I gave the overlay class a z-index of 1 so that it is higher than the image.
  
</!-->

Step 4

Firstly add a  jQuery ready function that will fire when the document is ready, this should call the setUp function.
 
</!-->

Step 5

Add the setup function, the first line of this function hides all of the objects with an overlay class. If for some reason JavaScript isn't working then the overlay will be visible over the image by default so the website will still be operational.
Next add a mouseenter event to all objects with the image class. We use an anonymous function which will be fired when  the mouse enters the boundary of the image object. The mouseenter function passes over a parameter named e. If you check e.srcElement it will provide a reference to the the image object that fired the event. This is useful as we can now find the overlay object that relates to that image specifically. We do this by referencing the parent object by calling .parent() (which should be the DIV with the polaroid class) and then using the .find() method on that element to find the the child object with the .overlay class.
Next add a mouseleave event to the .overlay object. This will be called when the mouse leaves the boundary of the overlay object. We use the same parent trick on this element to find the overlay object (this might seem incorrect as we should have a reference to the overlay object from the e.srcElement. However, I found this buggy and this approach worked much more reliably)
</!-->

In a nut shell that's it.