Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Direction Aware hover has Overlay onload and it Shouldn't

Posted on 2014-04-16
4
Medium Priority
?
393 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 59

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 59

Accepted Solution

by:
Julian Hansen earned 1800 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 59

Expert Comment

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

Featured Post

Setting up LaraDock for Laravel

Learn how to set up LaraDock in a Laravel project - LaraDock gives us an easy way to run a Laravel application using Docker in a single command.

Question has a verified solution.

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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

721 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