keep (or set) box-shadow inset for image

Question

I would like to set a box-shadow inset for images. This is not possible for images, so I googled for workarounds and found this as one of them: JsFiddle

The problem is that the span has a good wrap on the image, but if the image has a styling which include margin or padding then the span doesn't fit on the image as you can see in the example.

So what can I do to make the span always wrap the image without the white space of the margin? If there is a better way of doing this please let me know.

CSS

.image-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
}
.image-wrap:after {
    content: ' ';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
        box-shadow: inset 0px 0px 0px 5px red;
}

.image-wrap img {   
    width:300px;
    margin-left:150px;
}

Jquery

$('img').each(function() {
    var imgClass = $(this).attr('class');
    $(this).wrap('<span class="image-wrap ' + imgClass + '" style="width: auto; height: auto;"/>');
    $(this).removeAttr('class');
});

Try the box model, that should solve your padding/margin issues without having to go to the JS side of things to solve CSS issues - http://paulirish.com/2012/box-sizing-border-box-ftw/ — Jonny Sooter, Mar 28 '13 at 14:40
@JonnySooter Sadly, `border-box` never includes the margin, only (optionally) border and/or padding. — Blazemonger, Mar 28 '13 at 14:44
+1 You're right, for a second there I thought the question was about padding. — Jonny Sooter, Mar 28 '13 at 14:47

score 2 · Accepted Answer · answered Mar 28 '13 at 14:41

2

One approach that works in this specific case would be to manually move the margin-left from the img to the parent span:

$('img').each(function () {
    var imgClass = $(this).attr('class');
    $(this).wrap('<span class="image-wrap ' + imgClass + '" style="width: auto; height: auto;"/>').removeClass(imgClass)
        .parent().css('margin-left',$(this).css('margin-left')).end()
        .css('margin-left',0);
});

answered Mar 28 '13 at 14:41

Blazemonger

90,923
26
142
180

Might be worth mentioning that you have to move those properties individually -- not `margin`, but `margin-left`, `margin-top`, etc. -- and if you need to cover all possible use cases, more code (or a custom function) will be needed. – Blazemonger Mar 28 '13 at 15:12
@Youss, jsfiddle.net/WpGsx/36 didn't work for me: the box-shadow was not being displayed on top of the image, it was behind the image. Using FF20. – sversch May 02 '13 at 01:16

Roko C. Buljan · Answer 2 · 2013-03-29T06:00:56.137

2

LIVE DEMO

$('img').each(function() {
    $(this).wrap('<span class="image-wrap ' + this.className + '"/>').removeAttr('style');
    this.className='';
});

CSS:

.img1{
  width:300px;
  border:3px solid #f00;
  margin-left:40px;       /* NOTE THE IMAGE MARGIN ! */
}

.image-wrap{
  position:relative;
  display:inline-block;
  box-shadow: inset 0px 0px 20px #f00;
}

.image-wrap img{
   position:relative;
   width:100%;
   z-index:-1;
}

edited Mar 29 '13 at 06:00

answered Mar 28 '13 at 15:04

Roko C. Buljan

196,159
39
305
313

The question is about "_if_ the image has margin-left: px" – Youss Mar 28 '13 at 15:27
@Youss and as you can see, the image HAS `margin-left`, there's even the comment in CSS. Can you be more specific? – Roko C. Buljan Mar 28 '13 at 15:29
Hi I don't have control over the img and its properties. I have to deal with it as 'recieved' by php. So if the image (not its class) has margin, I have to address this. I cant look for its class and assign margin to it, that is beyond the scope of my problem. – Youss Mar 28 '13 at 15:35
1

This answer worked for me. Blazemonger's answer did not work for me: the box-shadow was not being displayed above the image. – sversch May 02 '13 at 01:15

keep (or set) box-shadow inset for image

2 Answers2