CODEWITHSUNDEEP
javascriptjquerycssimage
Geniusknight
Geniusknight

Reputation: 639

Unable to add an Image over another Image using CSS

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?

Upvotes: 0

Views: 309

Answers (3)

avcajaraville
avcajaraville

Reputation: 9084

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; }

Upvotes: 0

Blake Plumb
Blake Plumb

Reputation: 7199

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;
}

Upvotes: 1

evu
evu

Reputation: 1071

Psudeo elements do not work on img tags.

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

Upvotes: 2

Related Questions