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

Friday January 27, 2012 ()

In this blog we'll show you how to place an image inset on top of a larger image using div elements and appropriate CSS style of a HTML page. We don't display the inset right away, instead we hover over the image to actually show the inset image. We will also demonstrate how to crop images to desired sizes without scaling the image.

A link to a working demo of this blog can be found near the bottom of this article. View the source of the demo page to get the entire source.

Image inset, image on top of an image.

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.

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

Here is how our HTML should look like.

<div>
    <div class="main-image">
        <img src="http://www.ssd.noaa.gov/mtsat/wpac/rb-l.jpg"
                alt="Picture" />
        <div class="inset">
            <img src="http://www.ssd.noaa.gov/mtsat/twpac/rb-l.jpg"
                    width="300"  alt="Inset" />
        </div>
    </div>
</div>

Add the following snippet to our CSS div.inset class to control the opacity or transparency of the image inset when shown.

filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;

Image caption

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.

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

Cropping images from the top

<div style="height:400px;overflow:hidden">
    <div style="margin-top:-80px;">
        <img src="http://www.ssd.noaa.gov/mtsat/wpac/rb-l.jpg" 
              alt="Image" />
    </div>
</div>

The actual cropping is accomplished by overflow:hidden 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.

Cropping from the bottom

<div style="height:400px;overflow:hidden">
        <img src="http://www.ssd.noaa.gov/mtsat/wpac/rb-l.jpg" 
            alt="Image" />
</div>

Use the same procedure when cropping from the the sides using width attribute instead to position the image.

The demo

http://demo.kahimyang.info/cgi-cpp/Images.html

That's it. Good luck.


6,575

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