Solved

Direction Aware hover has Overlay onload and it Shouldn't

Posted on 2014-04-16
4
391 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 58

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 58

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 58

Expert Comment

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

Featured Post

Interactive Way of Training for the AWS CSA Exam

An interactive way of learning that will help you visualize core concepts so that you can be more effective when taking your AWS certification exam.  Built for students by a student to help them understand the concepts that they are being taught.

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn how to dynamically set the form action using jQuery.
Suggested Courses

628 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