CODEWITHSUNDEEP
cssxhtml
MAX POWER
MAX POWER

Reputation: 5448

Overlapping image within DIV

I have some divs which contain an image that fills the whole div:

<div class="callout">
    <img src="images/callout_image.gif" alt=""/>
</div>

.callout { float: left; width: 267px; height: 114px; }

Now I want to put another image in this DIV which overlaps part of the original image AND will also "pop out" of the DIV, i.e. it will extend beyond the dimensions of the DIV but the DIV itself does not extend.

I am having trouble doing this, can anyone help?

Upvotes: 0

Views: 922

Answers (1)

ScottS
ScottS

Reputation: 72261

Something like this:

<div class="callout">
    <img src="images/callout_image.gif" alt=""/>
    <img src="images/callout_image.gif" alt="" class="pop" />
</div>

.callout { float: left; width: 267px; height: 114px; position: relative;}
.pop {position: absolute; top: 50%; left: 50%; z-index: 1;}

You might need to set overflow: visible on the div depending on the circumstances.

Upvotes: 1

Related Questions