Box-shadow inside image tag

HTML & CSS
1

Hello,
I’m trying to achieve an inner drop shadow effect inside an image, i have followed this guide: https://gist.github.com/715124 which seemed to acheive it nicely however if i add <a> tag to make the images hyperlinks then they will not be clickable, code can be seen here:
http://pet-pal.co.il/test/index.html

I wanted to ask how can i fix it and if there is any way of acheiving this effect in old browsers (ie7/8)

Thanks.

2

I removed the following CSS style and it works fine in Firefox:



ul li:after {...}
3

then whats the point ? :slight_smile: its needed for the shadow effect.

4

The fix is quite simple :). What you were doing before simply won’t work. You would have to choose between the shadow and the link. However if you switch up your CSS selector, you can have both :). Change that li:after rule to a:after.

ul a:after
5

Whoops , I never noticed.

Try this:



.XXX {width:140px;height:140px;position:relative;float:left;margin:5px}
.XXX:after  {
	position:absolute;top:0;left:0;bottom:0;right:0;
	content:"";
	-moz-box-shadow:inset 0 0 50px rgba(0,0,0,.75);
	-webkit-box-shadow:inset 0 0 50px rgba(0,0,0,.75);
	box-shadow:inset 0 0 50px rgba(0,0,0,.75)
	}	



<a href="/jack2" class='XXX'>
  <img src="/afiles/images/lfh.jpg" alt="" />
</a>
6

Thank u both for the help, it worked :slight_smile:
Just wondering now if there’s an easy way of adding the effect to IE8/7

7

You have a few options :).

  1. Use a hacky fix for IE7/8 which involes using filters/vendor prefixes which will have it display the same.
  2. I recommend this one. Assuming you are having a fixed height/width scenario such as above, I’d just apply it as a background image (create it in photoshop) and apply it to the <li> or something like that. Apply the code only to IE if you want. Once the browser dies out, you can remove that snippet of code and be doen with it :).