Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Image overlay - absolute positioning - fade in on mouseover

Posted on 2010-09-15
8
Medium Priority
?
628 Views
Last Modified: 2012-05-10
Hey,

I am working on a site and I have an area where I have three buttons, each button is its own image. I have another image state for the hover. My goal is to do a:

On hover -> fade in this new image over the existing one. My code is below in the box for the buttons.

I was looking at this site: http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/  - using that method, but I wasnt sure how to go about the absolute positioning on a site with floated elements and to be sure it appears the same on all browsers/resolutions.

Any ideas?

Thanks,

Ryan

Here is my CSS for the HTMl below:

div#mid-action {
      float:left;
}

ul.mid-btns {
      margin:0;
      padding: 0;
      list-style-type: none;
      float: left;
}

ul.mid-btns li {
      width:200px;
      height: 133px;
      margin:0;
}
      ul.mid-btns .mid-btn-exheight{
            height: 134px;
      }
div.mid-image {
      float:left;
      width:798px;
      height: 400px;
}



<div id="mid-action">
		<ul class="mid-btns">
			<li><a href=""><img src="images/btn-company-profile.gif" alt="btn-company-profile" width="200" height="133" /></a></li>
			<li class="mid-btn-exheight"><a href=""><img src="images/btn-consulting-solutions.gif" alt="btn-consulting-solutions" width="200" height="134" /></a></li>
			<li><a href=""><img src="images/btn-client-success.gif" alt="btn-client-success" width="200" height="133" /></a></li>
		</ul>		
		<div class="mid-image">
			<a href="#"><img src="images/main-homepage-wave.jpg" alt="main-homepage-wave" width="797" height="400" /></a>
		</div>
	</div><!-- mid-action -->

Open in new window

0
Comment
[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
  • 4
  • 2
  • 2
8 Comments
 
LVL 13

Expert Comment

by:Onthrax
ID: 33686821
You still need to use absolute positioning. Just make sure the parent has a position relative and you'll be fine.
0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 33687645
Awesome...would you suggest just copy pasting the <ul> I have there, assigning different classes and position accordingly. Then I would put position:relative on #mid-action?

Ryan
0
 
LVL 13

Accepted Solution

by:
Onthrax earned 2000 total points
ID: 33689492
I would keep it a little simpler. Kepe your current structure intact as that works for you (I haven't tested it so I had to visualize it).

Use the href tags as the relative container, but make sure to give it a block display.
a {
display:block;
position:relative;
}

Then put both images inside the href as shown on your example site and that should be it.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 3

Expert Comment

by:deegoy418
ID: 33689756
You can use position absolute for child div and position relative for it's parent div

it will work, if you have still the issues, please share the code with at goyal.deepak@hotmail.com, I will make for you

thanks
0
 
LVL 13

Expert Comment

by:Onthrax
ID: 33689791
@deegoy. Putting a DIV tag inside a LI element is not valid w3c validation.
0
 
LVL 3

Expert Comment

by:deegoy418
ID: 33689844
hi

please have a  look the updated css, try yourself

div#mid-action {
      float:left;
}

ul.mid-btns {
      margin:0;
      padding: 0;
      list-style-type: none;
        position:relative;
}

ul.mid-btns li {
      width:200px;
      height: 133px;
      margin:0;
}
      ul.mid-btns .mid-btn-exheight{
            height: 134px;
      }
div.mid-image {
      width:798px;
      height: 400px;
        position:absolute;
        left:0;
        top:0;
}


thanks
0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 33691775
Ah so @Onthrax you are saying:

<a>
<img>
<img>
</a>

Then each will have its own class one is normal the other is absolute?

Ryan
0
 
LVL 13

Expert Comment

by:Onthrax
ID: 33691874
That would be the markup yes and both images would be absolute while the a tag is relative.

deegoy418's code might work also though have not tested it.
0

Featured Post

Tech or Treat! - Giveaway

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

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

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
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…

604 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