Java Behind Obvious: How to show details on hover of a image

Images! Big, small, colored, beautiful images. Sometimes, you want to add a description to your images and also want to keep this look nice. There are many ways to do this. The below trick it’s just one way of doing this, on mouse over an image, details just pop-up.

The CSS code is :

body
{ 
    background-color: #000;
    margin: 0 auto;
    padding: 0;
    position: relative;
}
img {  
    width: 450px; 
    height: 320px;  
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
div.photo_album { width: 90%; padding: 20px;}

ul.album { list-style: none; }

ul.album li 
{ 
    width: 450px;
    float: left; display: inline;
    margin: 0; padding: 0;
    position: relative;
}
ul.album li:hover {z-index: 99;}
/*--Thumbnail Styles--*/
ul.album li img 
{ 
    position: relative;
    filter: alpha(opacity=50);
    opacity: 0.5;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /*--IE8
                                                                     Specific--*/
}
ul.album li:hover img
{ 
    z-index: 999;
    filter: alpha(opacity=100);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
/*--Details Style--*/
ul.album li .info 
{
    position: absolute;
    left: -17px; top: -10px;
    padding: 310px 10px 5px;
    width: 465px;
    display: none;
    background: #fff;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}
ul.album li:hover .info {display: block;}

ul.album li h2 
{ 
    font-weight: bold;
    text-align: center;
}
ul.album li p 
{ 
    padding: 0; margin: -20px 0 0 10px; 
    font: 20px "Comic Sans MS", cursive, sans-serif;
}

In addition, you can test it from HTML, like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Show image details</title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <link href="./css/styles.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="photo_album">
            <ul class="album">
                <li>
                    <a href="#"><img src="./rafael/1.jpg" alt="" /></a>
                    <div class="info">
                        <h2>Rafael Nadal</h2>
                        <p>Miami Masters Series 2011<br />
                           Photos by Ella Ling</p>
                    </div>
                </li>
                <li>
                    <a href="#"><img src="./rafael/2.jpg" alt="" /></a>
                    <div class="info">
                        <h2>Rafael Nadal</h2>
                        <p>Miami Masters Series 2011<br />
                           Photos by Ella Ling</p>
                    </div>
                </li>
            </ul> 
        </div>
    </body>
</html>

Java Behind Obvious

Tuesday, April 5, 2011

How to show details on hover of a image

No comments: