Solved

Direction Aware hover has Overlay onload and it Shouldn't

Posted on 2014-04-16
4
381 Views
Last Modified: 2014-04-21
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
Comment
Question by:Alicia St Rose
  • 3
4 Comments
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 40006520
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
 
LVL 54

Accepted Solution

by:
Julian Hansen earned 450 total points
ID: 40006544
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
 
LVL 7

Author Closing Comment

by:Alicia St Rose
ID: 40011658
That did the trick, friend.

Thank you so much!
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 40012101
You are welcome - thanks for the points
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

808 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question