CSS - Using a pseudo-element for an image mask

Question

I'm showing an image on a page and I wish to add a mask to achieve a specific border-and-corner effect.

To do this I was hoping to use a pseudo-element in the following manner:

img
{
    height: 58px;
    left: 0;
    position: absolute;
    top: 0;
    width: 58px;
    z-index: 1;

    &:after
    {
        background-image: url(images/frame.gif);
        content: "&nbsp;";
        height: 58px;
        left: 0;
        position: absolute;
        top: 0;
        width: 58px;
        z-index: 2;
    }
}

But the mask image never shows up. I've also tried adding a negative left- and top-margin to 'pull' the pseudo-element back over the <img> but still nothing.

Is there a glaring error in my CSS or does the problem lie with an inherent limit to pseudo-elements?

Are you using some CSS framework? `&:after` is not a valid CSS rule... — Jonathan Naguin, Nov 05 '13 at 11:44
@JonathanNaguin that is less.. awj, try keeping the content at first then add background-image.. — Mr_Green, Nov 05 '13 at 11:46
You cannot use a pseudo-element with an image. You would have to wrap the image in a div and use the `:after` on that. — Paulie_D, Nov 05 '13 at 11:47

Krasimir · Accepted Answer · 2013-11-05T14:29:37.753

3

By default the img tag is an inline element and it is not a container to add an after pseudo class. I'll suggest the following code:

div.container {
    img {
        display: block;
        height: 58px;
        left: 0;
        position: absolute;
        top: 0;
        width: 58px;
        z-index: 1;
    }
    &:after {
        display: block;
        background-image: url(images/frame.gif);
        content: " ";
        height: 58px;
        left: 0;
        position: absolute;
        top: 0;
        width: 58px;
        z-index: 2;
    }
}

Notice that the pseudo class is also a block element.

edited Nov 05 '13 at 14:29

answered Nov 05 '13 at 11:49

Krasimir

13,306
3
40
55

Works perfectly, thanks. Also, for completeness, I should add that `content: " ";` is not valid - I shouldn't have had that in there. – awj Nov 05 '13 at 12:11
In this case, the `div.container` should have either `position: relative` or `absolute` set itself, otherwise the child elements will be positioning off of the next highest parent that does have `position` set. – ScottS Nov 05 '13 at 15:40

CSS - Using a pseudo-element for an image mask

1 Answers1