[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 395
  • Last Modified:

Direction Aware hover has Overlay onload and it Shouldn't

Hi,
I'm using this jQuery plugin. The effect should work like this.
But mine 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. But I can't figure out what the difference is...

Thanks!
0
Alicia St Rose
Asked:
Alicia St Rose
  • 3
1 Solution
 
Julian HansenCommented:
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 ....
0
 
Julian HansenCommented:
Ok, found out more - in the programs page the first <li> is missing an image. If you add this image then the page has the same problem as the experts page. In which case you need to set the

left: -100% for the .da-thumbs li a div style

line 1005 of styles.css that should fix both pages.
.da-thumbs li a div {
  background: none repeat scroll 0 0 #01224F;
  height: 100%;
  opacity: 0.8;
  position: absolute;
  top: auto;
  width: 100%;
  left: -100%; /* ADD THIS */
}

Open in new window

0
 
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
That did the trick, friend.

Thank you so much!
0
 
Julian HansenCommented:
You are welcome - thanks for the points
0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now