Jump to content

A:hover Img Problem


Pajje
 Share

Recommended Posts

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...

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Edited by Deirdre's Dad
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...