CODEWITHSUNDEEP
htmlcsscss-position
Johann
Johann

Reputation: 29867

Overlay an img on top of another img

In the following HTML, I want the small delete icon to appear in the upper left corner of its container (the div). The larger image (a cat) needs to be inside of the div and scale so that it does not exceed the height of the div. I need the div to float left because of how its used elsewhere. The delete icon is suppose to overlay on top of the larger image (if the larger image fills the width of the div). Please note, that the larger image may actually have a width that is much less than the div and it gets centered in the div. In this case, the delete icon, still is in the upper left corner but is not really overlaying on top of the larger image since the larger image would be too small. The width of the div always remains the same regardless of the width of the larger image.

Here is my html:

<div style="float:left; width:120px; height:90px; text-align:center; border:1px solid #c0c0c0">
    <img src="http://hellopune.mobi/site2/Images/icon_delete.png" />
    <img src="http://www.petfinder.com/wp-content/uploads/2012/11/100691619-what-is-cat-fostering-632x475.jpg" style="height:90px" />
</div>

And in fiddler: http://jsfiddle.net/AndroidDev/eJZ7X/

Upvotes: 1

Views: 98

Answers (2)

Mr. Alien
Mr. Alien

Reputation: 157334

Do you need something like this?

Demo

div {
    position: relative;
}

div img {
    max-width: 100%;
    max-height: 100%;
}

div img:first-of-type {
    position: absolute;
    top: 5px;
    right: 5px;
}

Here, am positioning the delete img to absolute with top and right properties, if you want left than you can do that too, and make sure you wrap them inside a position: relative; container.

Note: Am using first-of-type pseudo so you do not have to alter your DOM, but if you think that the order of the img might change than better assign a class to the delete img instead.

As you feel my selectors are too generic, assume that you have a parent with a class called .img_holder and this will have div nested further and than you nest both the img inside that so your selector will be

.img_holder > div {
    position: relative;
}

.img_holder > div > img {
    max-width: 100%;
    max-height: 100%;
}

.img_holder > div > img:first-of-type {
    position: absolute;
    top: 5px;
    right: 5px;
}

And the DOM would look like

<div class="img_holder">
    <div>
        <img src="#" />
        <img src="#" />
    </div>
    <div>
        <img src="#" />
        <img src="#" />
    </div>
    <div>
        <img src="#" />
        <img src="#" />
    </div>
</div>

Upvotes: 3

donnywals
donnywals

Reputation: 7591

I've updated your fiddle here

The icon img now has an icon class and is absolute positioned in the div.

html:

<div style="float:left; width:120px; height:90px; text-align:center; border:1px solid #c0c0c0">
    <img class="icon" src="http://hellopune.mobi/site2/Images/icon_delete.png" />
    <img src="http://www.petfinder.com/wp-content/uploads/2012/11/100691619-what-is-cat-fostering-632x475.jpg" style="height:90px" />
</div>

css:

.icon {
    position: absolute;
}

Upvotes: 0

Related Questions