Apply box shadow styling directly to an image

Question

I have images coded like this in order to get the padding/shadow styling:

 <div class="slick-shadow"><img src="/images/image.jpg" alt="image"></div>

I tried applying the class slick-shadow directly to the images but the shadow part wasn't showing up, just the padding. Is there a way I could change the CSS to work directly on the image and achieve the same visual look?

Here is the CSS:

.slick-shadow {
    position: relative;
    background: #fff;
    padding:5px;
}
.slick-shadow:before, 
.slick-shadow:after {
    z-index: -1; 
    position: absolute; 
    content: "";
    bottom: 15px;
    left: 10px;
    width: 44%; 
    top: 80%;
    max-width:300px;
    background: rgba(0, 0, 0, 0.5); 
    -webkit-box-shadow: 0 16px 10px rgba(0,0,0, 0.4);   
    -moz-box-shadow: 0 16px 10px rgba(0, 0, 0, 0.4);
    box-shadow: 0 16px 10px rgba(0, 0, 0, 0.4);
    -webkit-transform: rotate(-3deg);    
    -moz-transform: rotate(-3deg);   
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
} 
.slick-shadow:after {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px;
    left: auto;
}

Note that the 3-character color codes are not supported in all browsers. — David Starkey, Aug 01 '13 at 16:39
They're pretty much universally supported, which browsers do they not work in? — Christopher Marshall, Aug 01 '13 at 16:52
most browsers do not support using :after or :before on img tags. See: http://stackoverflow.com/a/5843078/1947286 — apaul, Aug 01 '13 at 16:52
@apaul34208: True, but `:before`/`:after` here are being used on a `div`, not an `img`. — thirtydot, Aug 01 '13 at 16:53
@thirtydot The OP is requesting that they be used on an img. — user1477388, Aug 01 '13 at 16:54
@thirtydot it appears that he would like to use them on the image, it's why its not working when the class is applied to the image tag. The answer in the link will likely solve his problem. — apaul, Aug 01 '13 at 16:55
@apaul34208: Yeah, I see now. You're right. Well, the solution is to *just keep the `div`* instead of trying to remove it and apply the shadow directly to the `img`. — thirtydot, Aug 01 '13 at 16:57

score 0 · Accepted Answer · edited May 23 '17 at 11:49

0

If you're just looking to avoid going through and wrapping all your images in divs manually you could do something like this:

Working Example

$(function() {
    $('img').wrap('<div class="slick-shadow" />');
});

Most browsers do not support using :after or :before on img tags.
See: https://stackoverflow.com/a/5843078/1947286 For more info.

edited May 23 '17 at 11:49

Community

1
1

answered Aug 01 '13 at 17:07

apaul

16,092
8
47
82

Apply box shadow styling directly to an image

1 Answers1