Solved

Direction Aware hover has Overlay onload and it Shouldn't

Posted on 2014-04-16
4
389 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
4 Comments
 
LVL 57

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 57

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 8

Author Closing Comment

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

Thank you so much!
0
 
LVL 57

Expert Comment

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

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article discusses four methods for overlaying images in a container on a web page
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 …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

729 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