?
Solved

Image overlay - absolute positioning - fade in on mouseover

Posted on 2010-09-15
8
Medium Priority
?
625 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

762 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