Is there a way to make an image clickable while still retaining the box shadow effect created using CSS3? Currently, I have set the z-index of -1 for the img tag to apply the box shadow. However, this makes the image not clickable when an href tag is added. How can I solve this issue and make the image clickable with the box shadow intact?
Here is my current CSS:
.postimage {
width:100%;
height:250px;
margin:10px 0px 20px 0px;
z-index:12;
box-shadow: inset 2px 2px 10px rgba(0,0,0,0.9);
}
.postimage img{
position:relative;
z-index:-1;
}
This is how my HTML looks like:
<div class="postimage">
<a href="http://www.google.com"><img src="images/bg.jpeg" /></a>
</div>
If I remove the -1 z-index, the image becomes clickable but the CSS3 box shadow doesn't work as intended.