Hover isnt working

[lukeurtnowski]

on the page

Im trying to make the image dissapear and only change the backgroung- color
HTML

<div class="Photo_Gallery">
<a href='' title='Gallery'>
<img src='' alt='Gallery' />
<h2>Charlies Boat</h2>
</a>
</div>

and heres the CSS

.Photo_Gallery { position: relative; width: 220px; height: 149px; float: left  }
.Photo_Gallery a { color: #fff; }
.Photo_Gallery img { position: absolute; }
.Photo_Gallery h2, .page-id-4160 .Photo_Gallery h3, .page-id-4160 .Photo_Gallery h4 { color:#fff; text-align: center; position: relative; z-index:9; margin-top: 55px}
.Photo_Gallery img:hover { background-color: #231f20; }

[RyanReese]

You’re trying to change the images background color. A files background color. If you are trying to hide it, just set opacity:0; or visibility:hidden; or display:none; or a wide variety.

[lukeurtnowski]

Ok, think I got mixede up with this, heres what im lookijng at

Im trying to make it so that when the mouse mover over the image, the only thing that happens is the image is replaced with the color

Heres my thinking

<div class="Photo_Gallery">
<a href='http://www.dev.urturt.com/charlies-boat/' title='Gallery'>
<img src="/images/boat.jpg"  id="Charlies_Boat">
<h2>Charlies Boat</h2>
</a>
</div>

and the CSS

.Photo_Gallery { width: 220px; height: 149px; position: relative; float: left  }
.Photo_Gallery img { position: absolute; top: 0; left: }
.Photo_Gallery a { color: #fff; }
.Photo_Gallery h2 { color:#fff; text-align: center; position: relative; z-index:9; top: 60px}

#Charlies_Boat:hover { background-color: #231f20; background-image:none }

This makes sense to me but not Chrome

[SamA74]

The img is not a background, so background-image: none; won’t work. As Ryan said, make the img disappear with opacity: 0; or other methods mentioned.

[RyanReese]

You are trying to change the image file so it has a different background. Do you not see why that won’t work? You are trying to ADD/MODIFY a file.

[lukeurtnowski]

oh ok, so my setup doesn’t make sense, I thought id be smart if I made it so that the image could be swapped out in the HTML (not the CSS) Is this possible?
I would think that id have

<div class="Photo_Gallery">
<a href='http://www.dev.urturt.com/charlies-boat/' title='Gallery'>
<img src="/images/boat.jpg"  id="Charlies_Boat">
<div></div>
<h2>Charlies Boat</h2>
</a>
</div>

then when when the mouse hovers over the image, I can turn its opacity to 0, but since it’ll also hover over the div would I just give it a background color (after I give it a height)

[ronpat]

I’m not gonna pretend to understand the complexity of your page.

Try these. One is a background-image, one is a foreground image. The image in both examples is replaced with a color when hovered.

These are “working pages”. They start with <!doctype>, end with </html>. Test them. Open them in your browsers and see if they do what you wish.

hover bg-image2-lukeurtnowski.html (688 Bytes)

hover fg-image3-lukeurtnowski.html (813 Bytes)

[lukeurtnowski]

than ks

[Aysun]

Try doing this with z-index. This also means you have to include your link and image in a div. You set the div to relative positioning and the image to absolute. So basically you have a colored div with z-index 1 and the image z-index 2. on ;hover you switch the z-index numbers. This might be a workaround and I’m not sure if it works.