Solved

Image overlay - absolute positioning - fade in on mouseover

Posted on 2010-09-15
8
620 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
  • 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 500 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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
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: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

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…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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 …
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…

808 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