Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Image overlay - absolute positioning - fade in on mouseover

Posted on 2010-09-15
8
Medium Priority
?
630 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 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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

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.

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

572 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