CSS add marker/symbol over an element

Question

I have two images:

<img ng-src="image1.jpg" class="regular">
<img ng-src="image2.jpg" class="favorite">

For the second image, I am looking for a way to structure my CSS class such that a marker/symbol appears over the image (example a star for favorite or just a letter - maybe a drawing). Is there a way to do so?

z-index Property will work for you? Stili some code would help — Anjula Ranasinghe, Mar 27 '15 at 15:02
The name of the effect you are lookig for is called "overlay". Now just google , you will have a much better idea. Unless you want us to do your work — Sai, Mar 27 '15 at 15:09

Stickers · Answer 1 · 2015-07-10T13:38:59.610

3

As <img> element cannot have pseudo content, so you could wrap it into a <span> tag or so into the markup, and apply the pseudo content on it instead.

.favorite {
    position: relative;
    display: inline-block;
}
.favorite:before {
    content: "\2605";
    position: absolute;
    left: 5px;
    top: 5px;
}

<span class="favorite"><img src="//dummyimage.com/100x100"/></span>

edited Jul 10 '15 at 13:38

answered Mar 27 '15 at 15:14

Stickers

75,527
23
147
186

I had something quite similar, using font-awesome. Render could be better : http://fiddle.jshell.net/msieurtoph/ndgha1g9/ (Dont miss the link to the font-awesome styles sheet) – M'sieur Toph' Mar 27 '15 at 15:19
@M'sieurToph' nice! as it's just for the demo purpose so trying to make things as simple as possible. – Stickers Mar 27 '15 at 15:25
...and you were right ;) I did not want to post another similar answer, so I put my link as a comment of yours. – M'sieur Toph' Mar 27 '15 at 15:28

score 1 · Answer 2 · answered Mar 27 '15 at 15:11

1

Absolute position works.

Try:

With:

.regular {
 position: absolute;
    left: 0px;
}

.favorite {
 position: absolute;
 left: 100px;
 border: 1px solid black;
}

Code here: https://jsfiddle.net/zyng2Lxj/

answered Mar 27 '15 at 15:11

James Korden

724
4
19

I don't think this is what the OP was asking for. He's not trying to overlay one on the other..he's trying to add an overlay a third image on the "favourite" image. – Paulie_D Mar 27 '15 at 15:15

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

1

as image tag doesn't support after pseudoelement, what about a little jquery code like:

$(function() {

    $('.favorite').after('<img src="" class="icon" />');

});

the position the image with the class as in this FIDDLE

(all credit to @Christopher Harris for his answer at Does :before not work on img elements?)

edited May 23 '17 at 12:21

Community

1
1

answered Mar 27 '15 at 15:47

Alvaro Menéndez

8,766
3
37
57

CSS add marker/symbol over an element

3 Answers3

Linked