<div>
The question is actually why does it work on the working page - it shouldent. The overlaying div is absolutely positioned inside the &lt;a&gt; which is positioned relative - so in the working page the overlay should be positioned over the &lt;a&gt; - which it isn't.<br />
<br />
So the question is - do you want to know why it is working (when it shouldn't) in the working page or how to make it do what you want in the &quot;non-working&quot; page.<br />
<br />
When you hover over the image the overlay gets the following style<br />
<br />
display: block; left: -100%; top: 0px; transition: all 300ms ease 0s;<br />
<br />
So if you give your overlay a defalut left: -100% to start off with it should fix the first page.<br />
<br />
Not sure though why second page is working ... intriguing ....
</div>


The question is actually why does it work on the working page - it shouldent. The overlaying div is absolutely positioned inside the <a> which is positioned relative - so in the working page the overlay should be positioned over the <a> - which it isn't.

So the question is - do you want to know why it is working (when it shouldn't) in the working page or how to make it do what you want in the "non-working" page.

When you hover over the image the overlay gets the following style

display: block; left: -100%; top: 0px; transition: all 300ms ease 0s;

So if you give your overlay a defalut left: -100% to start off with it should fix the first page.

Not sure though why second page is working ... intriguing ....

<div>
That did the trick, friend.<br />
<br />
Thank you so much!
</div>


That did the trick, friend.

Thank you so much!

<div>
You are welcome - thanks for the points
</div>


<div>
<div class="content wysiwyg-content">
Hi,<br />
I'm using this jQuery <a href="http://tympanus.net/codrops/2012/04/09/direction-aware-hover-effect-with-css3-and-jquery/" rel="ugc">plugin</a>. The effect should work like <a href="http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/" rel="ugc">this</a>.<br />
But <a href="http://sandbox.intrepidrealist.com/rlf-demo/rlf-team/" rel="ugc">mine</a> has all the overlays on the images when the page loads. Once I hover over one, it works fine.<br />
<br />
I've got it working fine on this <a href="http://sandbox.intrepidrealist.com/rlf-demo/rlf-programs/" rel="ugc">page</a>. But I can't figure out what the difference is...<br />
<br />
Thanks!
</div>
</div>


Hi,
I'm using this jQuery plugin (http://tympanus.net/codrops/2012/04/09/direction-aware-hover-effect-with-css3-and-jquery/). The effect should work like this (http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/).
But mine (http://sandbox.intrepidrealist.com/rlf-demo/rlf-team/) has all the overlays on the images when the page loads. Once I hover over one, it works fine.

I've got it working fine on this page (http://sandbox.intrepidrealist.com/rlf-demo/rlf-programs/). But I can't figure out what the difference is...

Thanks!

Direction Aware hover has Overlay onload and it Shouldn't

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.

jQuery

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.

JavaScript

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.