2 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • United States
mike_jandreau says

Hey guys,

I’m trying to overlay a semi-transparent image with a search icon on it, on mouseover of specific images on the site.

CSS is this: .image img { margin: 2px; padding: 2px; border:2px solid #333; display:block; } .image img:hover { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:transparent url(images/magnifying-glass-hover.png) no-repeat scroll 0 0; display:block; }

However, when the “image” is mousedover, the magnifying-glass-hover.png icon shows behind the image I want it to overlay on.

Any help on what I’m doing wrong? I’m going for the same type of effect seen here in this theme: http://www.boomcrew.co.uk/portfolio-fresh/wood/blue/projects.html

Thanks!

83 posts
  • Bought between 1 and 9 items
  • Exclusive Author
  • Germany
  • Has been a member for 4-5 years
  • Referred between 1 and 9 users
  • Sold between 5 000 and 10 000 dollars
Bruno_V says

You should apply the background hover effect to another element, not the image itself. It’s what it is: a background. So it will always go behind. Use a span for example :)

2429 posts
  • Has been a member for 4-5 years
  • Exclusive Author
  • Europe
  • Bought between 10 and 49 items
  • Referred between 100 and 199 users
  • Sold between 100 and 1 000 dollars
  • Microlancer Beta Tester
digitalimpact says
Hey guys,

I’m trying to overlay a semi-transparent image with a search icon on it, on mouseover of specific images on the site.

CSS is this: .image img { margin: 2px; padding: 2px; border:2px solid #333; display:block; } .image img:hover { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:transparent url(images/magnifying-glass-hover.png) no-repeat scroll 0 0; display:block; }

However, when the “image” is mousedover, the magnifying-glass-hover.png icon shows behind the image I want it to overlay on.

Any help on what I’m doing wrong? I’m going for the same type of effect seen here in this theme: http://www.boomcrew.co.uk/portfolio-fresh/wood/blue/projects.html

Thanks!

Of course it shows up behind your img, because that’s what you’re telling it: “on hover, place a background image behing this image”

That site you’re inspiring yourself from does something like this:

HTML :
<a href="image.jpg" class="roll-to-preview">
<img src="thumb.jpg" height="y" width="x" />
</a>

CSS :

.roll-to-preview {background:url('blank-spacer-image.gif'); position:relative; z-index:10;}
.roll-to-preview:hover { background:url('the-image-you-need-on-hover');}

Follow this method and just add your image sizes and what else you need.

EDIT : Explanation:

Specifying z-index on the anchor tag pulls it in front, above the img. But we still see through it, because its bg is a transparent gif. However, on hover, the gif is replaced by the image you need, like that “enlarge/preview” type everybody’s using nowadays :)

And use Firebug not only for pasting your CSS here – take a peek at the source code whenever you want to recreate something :)

2 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • United States
mike_jandreau says

Thanks for the help guys.

I’ve just about got it now, thanks to both of your help. I appreciate it.

by
by
by
by
by
by