Having trouble with code

 

.latestwork:hover {

height:auto;

background-image : url(images/someImage.png);

 

Anyone know why this doesn't work?

I take it you've got the original (non-hover) image set as a background image as well? Rather than an in-page image?

 

If not, that would explain it lol.

 

If so, then can you post your html as well as the rest of the css

I take it you've got the original (non-hover) image set as a background image as well? Rather than an in-page image?

 

If not, that would explain it lol.

 

If so, then can you post your html as well as the rest of the css

 

 

 

Hi Scott,

 

No, basically using this code

 

HTML

 

<div class="latestwork">

<img src="images/mainImage.png" alt="dummy image" width="275" height="216" />

</div>

 

 

CSS

 

.latestwork {

height:auto;

background-color:#999;

padding:5px;

margin-bottom:5px;

float:left;

clear:both;

width:auto;}

 

.latestwork:hover {

height:auto;

background-image : url(images/portmanGroupHover.png);

 

 

padding:5px;

margin-bottom:5px;

float:left;

clear:both;

width:auto;

 

}

The reason it wont work, is because the hover attribute is trying to apply a background image, which will be hidden by the existing image from within the html

 

Try setting the original image as a background image instead, see if that makes a difference

 

S

What scott said should work, however you would need to place a transparent img in the img tag (if theirs no image, it'll reveal the alt attribute, and cause aesthetic problems in some browsers). Alternatively, you could use a different tag (i.e div or span etc.)

 

You could also (this is what i would try) is wrapping the image in another tag, then on the img hover, set the visibility property, and have you background image on the wrapped element.

 

Like so.

 

<span class="hover"><img src="images/mainImage.png" alt="dummy image" width="275" height="216" /></span>

 

.latestwork {
height:auto;
background-color:#999;
padding:5px;
margin-bottom:5px;
float:left;
clear:both;
width:auto;}

.latestwork:hover {
height:auto;
visibility:hidden;
}

.hover{
display:block
background-image : url(images/portmanGroupHover.png); 
}

 

Not tested, but just an idea.