<h3>
Image inset, image on top of an image.
</h3>
<p>
Our goal is accomplished by using two divs.  Shown below is the style of the divs that will hold the main larger image and the inset.  Our inset image is 

located at the bottom right corner of the main image.
</p>
<p>
<pre class="brush:  css;highlight:[2,8,10,11]">
div.main-image{
    position:relative;
    display:block;
    float:left;
    border:0px;
}
div.inset{
    visibility:hidden;
    position:absolute;
    right:-0px;
    bottom:-0px;
    margin-bottom:5px;
    margin-right:5px;
    border: 0px;
}
div.main-image:hover div.inset{
    visibility:visible;
}
</pre>
</p>
<p>
Here is how our HTML should look like.
</p>

<pre class="brush: xml;highlight:[2,5]">
&lt;div>
    &lt;div class="main-image">
        &lt;img src="http://www.ssd.noaa.gov/mtsat/wpac/rb-l.webp"
                alt="Picture" />
        &lt;div class="inset">
            &lt;img src="http://www.ssd.noaa.gov/mtsat/twpac/rb-l.webp"
                    width="300"  alt="Inset" />
        &lt;/div>
    &lt;/div>
&lt;/div>
</pre>

<p>
Add the following snippet to our CSS <b><i>div.inset</i></b> class to control the opacity or transparency of the image inset when shown.    
</p>

<p>
<pre class="brush: css">
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
</pre>
</p>


<h4>
Image caption
</h4>
<p>
By adjusting the position of the inset, we could  turn it to an image caption.    The CSS snippet below would create a transparent top caption to our image.  
</p>

<p>
<pre class="brush: css">
div.caption-image{
    position:relative;
    display:block;
    float:left;
    border:0px;
}
div.caption{
    position:absolute;
    left:0px;
    top:0px;
    border: 0px;
    height:30px;
    width:100%;
    background-color: white;
    filter:alpha(opacity=40);
    -moz-opacity:0.4;
    -khtml-opacity: 0.4;
    opacity: 0.4;
}

div.caption-image:hover div.caption {
    filter:alpha(opacity=80);
    -moz-opacity:0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}
</pre>
</p>


<h3>
Cropping images from the top
</h3>
<p>
<pre class="brush: xml;highlight:1">
&lt;div style="height:400px;overflow:hidden">
    &lt;div style="margin-top:-80px;">
        &lt;img src="http://www.ssd.noaa.gov/mtsat/wpac/rb-l.webp" 
              alt="Image" />
    &lt;/div>
&lt;/div>
</pre>
</p>
<p>
The actual cropping is accomplished by <b><i>overflow:hidden</i></b> style.  To avoid cutting the bottom of the image, the sum of the height of the outer div and the positive value of the top margin of the inner div should be the actual height of the image.
</p>

<h3>
Cropping from the bottom
</h3>

<p>
<pre class="brush: xml">
&lt;div style="height:400px;overflow:hidden">
        &lt;img src="http://www.ssd.noaa.gov/mtsat/wpac/rb-l.webp" 
            alt="Image" />
&lt;/div>
</pre>
</p>

<p>
Use the same procedure when cropping from the the sides using <b><i>width</i></b> attribute instead to position the image.
</p>

<h3>
The demo
</h3>
<p>
<a href="http://demo.kahimyang.info/cgi-cpp/Images.html" target="_blank" class="news_link" title="Demo page">http://demo.kahimyang.info/cgi-cpp/Images.html</a>
</p>

<p>
That's it.  Good luck.
</p>



Image manipulation using HTML Div and CSS - image overlay on image, cropping and image caption