Question

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="##">&rarr; 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!

Answer 1

Without seeing your markup, I don’t know if this would work for you, but you could possibly apply box-shadow to the img‘s containing element.