Unable to add an Image over another Image using CSS

Question

Well I was trying to display a small logo image over another image (by default on all images) by using CSS but somehow nothing is displaying. Here is the CSS I used

img:after
{
    content: '';
    display: inline-block;
    position: absolute;
    width: 48px;
    height: 48px;
    top: 40px;
    left: 40px;
z-index: 1px;
    background: url(http://dl.dropbox.com/u/51558405/small.png) no-repeat;
}

The image on which I try to do this are standard 640x360 size. I thought using z index component for the background image might get it in front but no use. Since I wish to do this with all the images by default, I can't afford to use editing html manually so is there a way of doing this without having to edit html and just CSS or scripts?

Sorry, I don't understand your question properly. You want an image and over it, a logo that is also a link ? — avcajaraville, Jul 18 '14 at 15:14

score 2 · Answer 1 · edited May 23 '17 at 10:33

2

Psudeo elements do not work on img tags.

See this question/answer: Why don't :before and :after pseudo elements work with `img` elements?

edited May 23 '17 at 10:33

Community

1
1

answered Jul 18 '14 at 14:59

evu

1,031
2
10
29

oh I see that was the problem ! So id there a way of doing it without pseudo elements in css – Geniusknight Jul 18 '14 at 15:03
It depends on your existing content and styles. What is the image contained within? (html & css) – evu Jul 18 '14 at 15:07
1

Something like this http://jsfiddle.net/4Z7H3/ may be of use, but again it depends on the img parent and if that has position relative or so. – evu Jul 18 '14 at 15:09
It's simple img tag inside link tags – Geniusknight Jul 18 '14 at 15:10
1

In that case, you can `display: none;` the image and make your new image a background image for the `` tag. Or use JS to replace the image source, or remove the image and replace it with a new one... Really, it's a matter of context and content. – evu Jul 18 '14 at 15:12

score 1 · Accepted Answer · answered Jul 18 '14 at 15:19

You can't use Psudeo Elements with img tags as evu points out, but you can wrap your image tags in an element and apply the psudeo element to the wrapped element. FIDDLE

<a href="#" class="image"><img src="http://placehold.it/250X250"/></a>

a.image {
    position: relative;
    display: inline-block;
}

a.image:after {
    content: '';
    display: inline-block;
    position: absolute;
    width: 48px;
    height: 48px;
    top: 40px;
    left: 40px;
    z-index: 1px;
    background: url(http://dl.dropbox.com/u/51558405/small.png) no-repeat;
}

haha after evu's answer I was doing something like this as well! :D Thanks :) — Geniusknight, Jul 18 '14 at 15:24

score 0 · Answer 3 · answered Jul 18 '14 at 15:19

I think what you want is something like this: http://jsfiddle.net/4Z7H3/2/

Trick is to use position relative and absolute in order to create the effect: using a wrapper with position relative, you can absolute position elements over that element.

html:

<div class="wrapper">
    <img class="bg-image" src="http://placehold.it/300x200" alt="">
    <a href="http://what.ever"><img class="logo" src="http://placehold.it/100x100" alt=""></a>
</div>

css:

.wrapper { overflow: hidden; position: relative; }
.logo { position: absolute; top: 0; left: 0; border: 1px solid red; }

Unable to add an Image over another Image using CSS

3 Answers3