A:hover Img Problem

[Pajje]

Hello,I have a problem. My png image i call to hover images on my page ends up below all images.Example css:

a:hover img{background: url(images/plus.png) no-repeat; position: relative; z-index:100;}img{border:0; position: relative; z-index:0;}

I don't know much about css, mabye teher is a simple solution. I hope...

[Synook]

I don't quite understand what you mean - do you have a link to a page with the problem?

[Pajje]

I don't quite understand what you mean - do you have a link to a page with the problem?

WebsiteAll the images that are a href can be opened with a lightbox script. I want to clarify for the visitors that the can klick the images to view them large by hover a png image with a plus sign. Problem is that the png image doesnt hover on top of of the images.

[Synook]

Well yeah, that's because you are setting the background image - if you want it to appear above the original graphic, you'll probably need to resort to JavaScript.

[Pajje]

Well yeah, that's because you are setting the background image - if you want it to appear above the original graphic, you'll probably need to resort to JavaScript.

Okay. I hoped it could be solved with only css. Thank you for your time Synook.

[jeffman]

This is worth experimenting with:

a.plus img + img {   display: none;   position: relative;   left: -150px;   top: -50px;}a.plus img:hover + img {   display: inline;}---<a href="Rudboda-9.jpg" class="plus"><img src="Rudboda-9-200x300.jpg"><img src="plus.png"></a>

I have read reports about buggy behavior in some browsers with this use of :hover and adjacent-sibling selectors, notably in Safari, but I cannot duplicate it in the current version, not on the Mac at least.