?
Solved

Image overlay - absolute positioning - fade in on mouseover

Posted on 2010-09-15
8
Medium Priority
?
638 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
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
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

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…

569 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