CODEWITHSUNDEEP
jqueryhoverfadeslidecaption
awrench
awrench

Reputation: 23

hover/rollover text fade in effect

I am looking to find out how this effect is created:

http://www.thesartorialist.com/category/men/

(when on that site hover over an image - the link/cation slides in from the side you "enter" the photo at).

What I wanted to know was how the background and link bar fades in and then how it knows which side of the image is the one you enter on?

I can see that there is CSS for the overstate which brings up the black gradient image overlay but not a great deal more.

Many Thanks in advance..

Alex

Upvotes: 0

Views: 1619

Answers (1)

Nahian Khondoker
Nahian Khondoker

Reputation: 367

for the bar sliding in and out, consider using -- http://docs.jquery.com/UI/Effects/Slide

And to get the side from which it should enter, you could do some raw stuff. That is, for hover on every image, you can get the mouse position, from the event object as event.pageX, and then you can always find out which side of the image lies at that point as you have the width of the image, and the offsetLeft of the image.

Once you get the mouse entry point, take the bar to that side by setting the css for the bar using jquery and then, just slide it in, from the required direction.

Best of luck.

Upvotes: 1

Related Questions