:before not applying gradient to image?

Question

I've been working on this for a while and I can't understand why it isn't working. In summary it's meant to just overlay a soft gradient over the image in the top left and right. However I can't get it to work. Any ideas?

<article class="main-home">
<div class="header">
    <div class="crumb">Placehold</div>
</div>

<div class="body">
    <img src="http://placehold.it/350x150" class="block_img"/>
</div>

and the css is also

article.main-home
{
    overflow: hidden;
}
article.main-home .body .block_img
{
    float: left;
    width: 50%;
}
article.main-home .body .block_img:before 
{
    background-image: -moz-linear-gradient(left center , rgba(255, 0, 85, 0.2) 0px, rgba(255, 0, 85, 0) 25%);
    background-size: 100% auto;
    content: "";
    display: block;
    height: 100%;
    left: 0 !important;
    position: absolute;
    top: 0 !important;
    width: 100%;
}

I've got an active jSFiddle here too: http://jsfiddle.net/J4Dgm/4/ Thanks a bunch guys!

possible duplicate of [Does :before not work on img tags?](http://stackoverflow.com/questions/5843035/does-before-not-work-on-img-tags) — user123444555621, Jun 08 '13 at 11:40

score 3 · Answer 1 · edited May 23 '17 at 12:11

3

<img> is one of these elements on which we can't apply :before and :after because it has no content due to the <img> tag being self-closing (in other words no closing tag)

edited May 23 '17 at 12:11

Community

1
1

answered Jun 08 '13 at 11:41

FelipeAls

21,711
8
54
74

Airen · Answer 2 · 2013-06-08T12:06:09.827

1

img element does not support pseudo elements

edited Jun 08 '13 at 12:06

answered Jun 08 '13 at 11:48

Airen

2,139
1
14
10

It does... but there's no `figure` element in OP question so? – FelipeAls Jun 08 '13 at 11:51
What I mean is that img element – Airen Jun 08 '13 at 11:53

score 0 · Answer 3 · answered Jun 08 '13 at 11:55

0

Actually, you need to give as well a real height.
100% of no height in parent gives 100% of nothing (cascade/inheritance).
give position:relative to element .body and
size you absolute pseudo-element on .body with:

top:0;
left:0;
bottom:0;
right:0;

answered Jun 08 '13 at 11:55

G-Cyrillus

101,410
14
105
129

:before not applying gradient to image?

3 Answers3