CSS - Css Image Enlarge On Hover Problem In Ie6, Need Help

Hello,

I am trying to get two image links (that look like tabs) to get to work on my web page. What I want to have is a tab that when a user hovers over it, the background image appears (just a different version of the original image).

So my HTML is:
Code:

        <table>
            <tr>
                <td><a class="flights"><img src="/images/buttons/f.gif"></a></td>
                <td><a class="vacations"><img src="/images/buttons/v.gif"></a></td>
            </tr>
        <table />

and my CSS is:
Code:

            .flights { 
                background:url(/images/buttons/f_h.gif) center top no-repeat;
                width: 78px;
                height: 41px;
/*                 background-image: url(/images/buttons/f_h.gif); */
                margin-right: 1px;
            }
            .flights:hover img { 
                visibility: hidden;
            }
            .vacations { 
/*                 background:url(/images/buttons/v_h.gif) top left no-repeat; */
                background-image: url(/images/buttons/v_h.gif);
            }

For some reason in FF (have not tested in IE) the background image sticks out a little at the bottom even though both images used are exactly the same size. Then when I hover over the tab, its background image appears but it is about halfway down from the foreground image.

Any insights as to why this might be happening?

I have seen it once but cannot find it. What I am looking for is a script or stylesheet code that when the mouse is over an image that is a link, a large size of that image will appear as a popup and disappear when mouse is removed, how do I do it or when can I find it.

Thanks

Tim

Hi there,

I am looking for a way to display a 'translucent' layer on top of an image when hovered on. Is this possible? I guess I can do it with a PNG, but this onl;y works in IE right?

Any ideas?

That's what a friend of mine is trying to do to her blog.
She's been trying for the longest time to get the hover command to change some link text color into a gif image, but all she can manage is the background behind the text.

If you don't get what I'm trying to say, this is a screen cap of what she has right now: img801.imageshack.us/i/screencap.png/

Basically, she want's to know if there's a way so that, rather than having the gif around her text, it would display inside of her text only so that the words would look like static.

If anyone knows if this is even possible, please help me out.

Thanks in advance.

I want a background image on an element that is a specific size where the background changes when hovered and the element functions as a link. I don't want text for the link to be visible.

I tried doing this as an a tag but the background is only visible for the height of the text unless I make the text huge and then make it transparent and that doesn't work in IE as the text is still visible

I want it to be a specific width and height. It is on the opposite side of a nav bar from my main nav that is a horizontal list so I want is to retail the size of my nav.

I don't want the background to be two different images for plain and hover so I was using background placement and moving the bg image on hover.

I thought I could then do this as a single li but I have not had success.

What is the simplest way to achieve this? I would like to keep the text somehow for accessibility but not have it visible.

Am trying to solve an annoying IE problem:

I have a menu which I has a background image which should appear when rolled over. Unfortunatly this works on Firefox but not IE. In internet explorer, nothing changes when the menu item is rolled over ( hovered ) .. any ideas?

The code is:

Code:

#item, #item2, #item3, #item4 {
height:24px;
width:147px;
border:1px solid #dddddd;
padding-top:14px;
padding-left:15px;
}
#item:hover, #item2:hover, #item3:hover, #item4:hover { color:white; }
#item:hover { background-image:url(homeRollover.png); }
#item2:hover { background-image:url(aboutusRollover.png); }
#item3:hover { background-image:url(servicesRoll.png); }
#item4:hover { background-image:url(contactusRoll.png); }

I'm still relatively new to this whole homepage thing. I was wondering if its possible using only CSS to make this happen:

i have a bunch of headings along the top of a page that a person can click on.

Below is a box with an image. I would like a different image to appear in that box when a differnt heading above is hovered over. Is this javascript stuff ?:S (havnt started learning that yet)

tanks, matt.

i know this is probably a really simple question but i cant think straight and why i cant work it out. when the person hovers over this image i want it to display a border or a certain colour.

Code:

#buildings
{
	height:195px;
	width:280px;
	float:left;
	margin-left:155px;
	margin-top:45px;
}

thats my css i have for this image:

Code:

<div id="buildings">
<a href="Buildings.php">
<img src="Menu_Images/Buildings.png" width="280" height="195" alt="Buildings" /></a>
</div>

what would i need to do do ive tried a hover: but that didnt seem to work

I have an image gallery, that when the thumbnail is hovered over a larger image appears. This works fine in Firefox and IE but not in Safari. I have validated my code and css.

The gallery is at http://www.briandobson.com.au/sthaust.html
Code:

<tr>
        <td valign="top">Boat Harbour, Goolwa<br />
          75  x 35cm <br />
          $720</td>
        <td valign="top">&nbsp;</td>
        <td>
<a class="thumbnail" href="#"><img src="SthAust/thumbs/Boat-Harbour---Goolwa.jpg" alt="Boat Harbour, Goolwa" width="200" height="46" />
<span>
<img src="SthAust/Boat-Harbour---Goolwa.jpg" alt="Boat Harbour, Goolwa" width="775" height="248" />
</span>
</a> 
         </td>
</tr>

CSS is in the head and separate styles.css

Code:

.thumbnail img {
	border: 1px solid white;
}
.thumbnail:hover {
	background-color: transparent;
	float: left;
}
.thumbnail:hover img {
	border: 1px solid white;
}
.thumbnail span {
	position: absolute;
	background-color: white;
	padding: 1px;
	left: -1000px;
	border: 1px solid black;
	visibility: hidden;
	color: black;
	text-decoration: none;
	display: block;
}
.thumbnail span img {
	border-width: 1px;
}
.thumbnail:hover span {
	visibility: visible;
	background: top;
	left: 0px;
	z-index: 50;
}

With thanks
Angela

Hi-
Please view this page in both FF and IE:
http://www.highpeakssoftware.com/test/home.html
when hovering over the links on the left, a small arrow should appear next to each one. I am acheiving this by specifying each <a>'s background-image as the arrow with a left position of -16px (which places it outside the border, so it's invisible), then making it visible by changing it's left position to 0 when it is hovered over.
you can search for the following declaration in the css:
Code:

div#subnav ul li a:hover

or line 164 to see the code

however, in IE, it seems to be reloading the image on every hover (you can see the delayed response, as well as the hourglass very briefly on hover)

This is extremely annoying
anyone know of any ways around this bug?

Hi,
I have a link and an image next to each other. I want to make the link hovered when I do mouseover on image. How do I do that ?

Here is the code I have now.
<a href="javascript:undefined" id="imageLinkId">GMNA</a>&nbsp;

<script language="javascript">
if( ... ) {
document.write('<img src="/graphics/channel/plus.png" id="div18Img" alt="Maximize this section" onMouseOver= >'); }
else {
document.write('<img src="/graphics/channel/minus.png" id="div18Img" alt="Minimize this section" onMouseOver= >'); }
</script>

Thanks

For some reason, when I hover over images in the #content div of my site firefox is adding a strange little box to the bottom right hand corner of the image. The color of the box is the same color as my text hyperlinks which makes it more interesting. You can see the issue on my site. Here is the code that deals with the images in the #content div:

Code:

#content img {
margin:2px 5px 0px 0px;
}

#content a img, #content a:visited img, #content a:active img {
border:2px solid #6FA6D9;
}

#content a:hover img {
border:2px solid #ffffff;
}

This issue is only happening on the images I insert from my wpg2 gallery. The images get one of the following classes applied to them:

Code:

.g2image_float_left {
display:block;
float:left;
}

.g2image_float_right {
display:block;
float:right;
margin-left:5px;
}

Now I don't see how either of these could cause a problem but they have to be the issue considering this doesn't happen on images that don't have one of the above classes applied to them.

Any ideas what is causing this?

Thanks in advance.

I'm taking a condensed class at the community college here and my final is due tomorrow night. My teacher has a very thick Russian accent and is very difficult to understand, and does not make himself particularly available away from class hours...so...I'm sort of stuck. I understand that this is an embarrassingly basic CSS I've got rigged up here, so I need no critiquing on it, though if you feel you must, go ahead. Anyway, I was finishing the thing up tonight and realized that I missed one of the requirements for this final project (sloppy handwriting =( ). My main question is this: On each page I have a series of thumbnails, and one larger image at left. I would like to (either with addition to the CSS, or with not too much extra addition to each of the thirty some pages) create a hover effect wherein ONLY the larger image at left will load a larger version of the image on mouseover. I found a few examples on CSS tutorial websites but have been unable to correctly apply it. I am really in a jam and would appreciate any help anyone could give me on this. Additionally, (I know this one is really pushing it) I was not able to resize images, as I am on a new machine and a tight budget, so couldn't afford a copy of photoshop. Most of the images are already resized to 600 x 800 (downloaded from my photobucket account onto the new machine after the old died) but a few of them are larger sizes...so on the mouseover, is there a way to constrain all images to their correct proportions, regardless of filesize? I think this might be an impossibility but I thought it was worth the time to ask anyway (e.g. 600 x 800 images that are constrained to a smaller size, will pop over on mouseover to full 600 x 800, while images that may exceed those dimensions would still on mouseover pop over at a maximum of 600 or 800, whichever side is the largest, and the smaller size whatever it should be proportionally)?

I know this is really convoluted and probably sounds incredibly dumb, but most of us in the class have essentially self-taught ourselves, given how difficult our instructor is to follow in the classroom, so I've done everything on this project by trying to find examples in a pretty terrible text book.

Any help would be hugely appreciated.

I am pasting in the CSS sheet, as well as the code for an example page, so that someone might possibly be able to help me correct/add this.

If you are able to help, please be as explicit and obvious as possible, because I am having a hard time working this out on my own.

CSS:

html, body {
font: 11px "Arial", Lucida Grande, Verdana, Sans-Serif;
margin: 0;
padding: 0;
}


#container {
width:800px;
margin-left:auto;
margin-right:auto;
}


#header {
width:800px;
text-align:center;
margin-top:5px;
margin-bottom:5px;
}


#header h1 {
margin:0;
font-size:18px;
}


#breadcrumb {
list-style-type: none;
margin:0;
padding:0;
margin-left:auto;
margin-right:auto;
}


#breadcrumb li{
float:left;
color:black;
padding-right:3px;
}


#breadcrumb li a{
text-decoration:none;
font-style:italic;
color:black;
}



#nav {
list-style-type: none;
margin:0;
padding:0;
}


#nav li{
float:left;
text-align:center;
width:25px;
}


#nav li#pages{
width:700px;
font-size:14px;
}


#nav li a img{
border:0;
}


#content {
width:800px;
}


#large-image-frame {
width:400px;
float:left;
}


#large-image-box {
margin-top:5px;
padding-top:10px;
width:320px;
margin-right:auto;
margin-left:auto;
background-color:black;
padding-bottom:10px;
}


#large-image-box img{
display:block;
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
}


#large-image-box span{
font-size: 12pt; display:block;
margin-left:auto;
margin-right:auto;
text-align:center;
height:60px;
width:300px;
background-color:white;
}


#thumbnail-box {
width:400px;
float:left;
}


#thumbnails {
list-style-type: none;
margin:0;
padding:0;
float:left;
}


#thumbnails li {
margin:0;
padding:0;
float:left;
}


div.small-image-box {
background-color:black;
width:110px;
margin-bottom:10px;
margin-left:15px;
text-align:center;
padding-bottom:5px;
padding-top:5px;
}

div.small-image-box img {
margin-bottom:5px;
display:block;
margin-left:auto;
margin-right:auto;
}


div.small-image-box span {
height:10px;
width:100px;
background-color:white;
display:block;
font-size:9px;
margin-left:auto;
margin-right:auto;
text-align:center;
}


#instructions {
width:800px;
}

a:link, a:visited, a:active { text-decoration: none }

a:hover { color: black;
background-color: white;
text-decoration: none;
border: 2px solid black; }








and the section of code which I would like the mouseover to be effective on:



<div id="content">

<div id="large-image-frame">

<div id="large-image-box">

<img src="images/OP06.jpg" width="94%" height="94%" alt="OP06" />

The section in red is where the image is that I would like to be able to mouseover for a larger (approximately 600 x 800 or 600 x _______/ or _____________ x 800, depending on proportions). Again, I'm desperate, and would be super super grateful for any help/pity any of you might toss my way. Thanks.

Hi everyone,

I was wondering what I would have to do to get an image to be above an in-line horizontal menu when it is is hovered upon.

Here is my css so far, right now on hover I have it changing color with text-shadow. I would like to keep that along with the image above. I have seen some tutorials using about using spans but nothing worked. Thanks in advance!

Code:

.nav ul{list-style-type:none; margin:0 auto; padding:0; width:600px;  height:50px; padding-left:500px; padding-top:100px} .nav li {display:inline; padding-right:15px } .nav a {text-decoration:none; color:white;} .nav a:hover {color: #0C0; text-shadow:2px 2px 2px white;}

Hello,

Basically I have a problem with my CSS regarding an on hover option in IE5. My CSS works fine on IE7 and IE6, however on IE5 it does not work properly and instead of displaying me a menu on IE5 (on Apple) it just creates empty spaces at the bottom of the page. The following is the CSS I use to make the menus work: Code:

ul {
 margin: 0;
 padding: 0;
 list-style: none;
 width:300px;
 background-color: #EAEAEA;
 }


ul li {
 position: relative;
 /* need for IE*/
 float: left;
 background-color:#EAEAEA;
 text-decoration: none;
 }

li ul {
 position: absolute;
 left: 149px;
 top: 0;
 display: none;
 background-color: #EAEAEA;
 text-decoration: none;
 }


ul li a {
 display: block;
 text-decoration:none;
 color: #777;
 background-color: #EAEAEA;
 padding: 5px;
 /* need for IE*/
 height: 1%;
 text-align: left;
 }

ul {
 margin: 0;
 padding: 0;
 list-style: none;
 width: 150px;
 }


li:hover ul, li.over ul {
 display: block; 
 }

As I already said this works fine on IE7 but a disaster on IE5 (on Apple). Also the doc type I am using is Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

I have also searched google, but can not really find a solution to my problem! Any sugestions are most welcomed

Thank You
bormli