Thumbnail effect like google chrome website screenshot

Question

Could anyone show me how to make a thumbnail with hover effect like google chrome tab website thumbnail e.g. when you hover the website screenshot image, a blue box will appear with pin and you can move.

THank you

Answer 1

You can use jQuery's hover event to provide the highlight effect, call setTimeout inside of it to slide up the top bar a little bit later, and call clearTimeout on that timeout in the unhover.

You can use jQuery UI to allow dragging; see here.

Answer 2

I don't know of any existing code that will do this out of the box but you can use JQuery UI sortable to drag/drop a list of box elements (including images) per this demo:

http://jqueryui.com/demos/sortable/#display-grid