CODEWITHSUNDEEP
javascripthtmlcss
zeemy23
zeemy23

Reputation: 681

What code did 37Signals use for their home page hover effect?

The hover button effects on http://37signals.com/ are beautiful and super quick. How did they do it? It appears to be javascript and css3, but I can't tell, from the source code, what kind of functions they used to achieve the effect.

Thanks! Azeem

Upvotes: 1

Views: 382

Answers (1)

JohnP
JohnP

Reputation: 50009

They have a few divs (with classes box hover_container hover_target) that have a hover event attached to it. When the user hovers over a target box, the class hover is added to it. The class hover has a gradient effect which highlights the currently hovered block.

Each of those blocks have a custom arrow image and text associated with it inside the markup. It's simple enough to see which one is being hovered over and display the correct content and arrows

Upvotes: 1

Related Questions