Hello,
I noticed using the clip property also removes the box-shadow property. Is there a way to use both on the same element?
Some background: I have three columns for three types of products. Each product has an image, and each image is different in size. I want to standardize image size so my products display consistently. But I would also like to use box-shadow to make the images more appealing. To make images the same size, I have to clip the bottom. But clipping the bottom also removes the box-shadow from the bottom. Is there anyway around this problem?
Here is my code sample:
<ul class="gameCover">
<li class="coverSpace"><img src="images/#IndexView.GameID#.jpg" alt="" title="" class="frontThumb" /></li>
<li><a href="##">→ See More</a></li>
</ul>
.gameCover {
float:left;
width:110px;
}
.coverSpace {
height:135px;
}
/* CATALOG GAME COVER IMG */
.frontThumb {
float:left;
position:absolute;
overflow:hidden;
clip:rect(0px, 100px 115px, 0px);
-moz-box-shadow:3px 3px 7px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:3px 3px 7px rgba(0, 0, 0, 0.5);
}
/* END CATALOG GAME COVER IMG */
Thanks!