CODEWITHSUNDEEP
cssimage
user1038814
user1038814

Reputation: 9667

Overlay image over image with variable height in CSS

I have an image (base.jpg) which has the following css:

.thumb-image {
padding: 0;
border: none;
margin: 0 auto 5px;
display: block;
width: 205px;
background: #EEE;
color: #8A8989;
border-image: initial;}

<img class="thumb-image" src="base.jpg" alt="" onerror="this.src='thumb.png'">

The image height is variable. Is there anyway I can overlay another image (overlay.png which is the red image) on top of base.jpg on the bottom right cornerusing css by adding another class declaration to the above css?

enter image description here Many thanks

Upvotes: 7

Views: 10087

Answers (2)

elclanrs
elclanrs

Reputation: 94121

You need a wrapper div and then absolute position the corner image.

<div id="wrap">
    <img src="img/big.jpg" class="big" alt=""/>
    <img src="img/corner.jpg" class="corner" alt=""/>
</div>

#wrap { position: relative; }
.big, .corner { display: block; }
.corner { position: absolute; right: 0; bottom: 0; }

Upvotes: 17

imsky
imsky

Reputation: 3289

There's not much you can do with just .thumb-image. If you modify the HTML somewhat, you can accomplish this fairly easily. I've put up an example here: http://jsfiddle.net/imsky/AsUuh/

This works IE8+ (with doctype), and across all other modern browsers, by using :before and generated content. You can convert it to use no modern features, but that would mean including an extra DIV inside each container. As an aside, :before doesn't work on IMG tags, so this is as minimal of markup as possible.

HTML:

<div class="thumb-container">
<div class="thumb-image">
<img src="http://placekitten.com/205/300">
</div>
</div>

CSS:

.thumb-image {
    margin:0 auto 5px;
    width:205px;
    background:#EEE;
    color:#8A8989;
    border-image:initial;
    position:relative;
    z-index:0
}
.thumb-image img {
    border:0;
    display:block;
    width:100%
}
.thumb-container {
    position:relative
}

.thumb-image:before {
    content:"";
    display:block;
    position:absolute;
    width:100px;
    height:100px;
    bottom:0px;
    right:0px;
    z-index:1;
    background:url(http://placekitten.com/100)
}

Upvotes: 0

Related Questions