I have tried and got this much
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.rg_anbg, .rg_ilmbg
{
background: none repeat scroll 0% 0% rgba(51, 51, 51, 0.8);
margin-left: 0px;
padding: 2px 4px;
}
rg_ilm, .rg_kn .rg_di:hover .rg_ilm, .rg_di:hover .rg_anbg
{
display: none;
}
.rg_an, .rg_anbg, .rg_ilm, .rg_ilmbg
{
-moz-box-sizing: border-box;
color: #FFF;
font: 11px/100% arial,sans-serif;
white-space: nowrap;
width: 100%;
}
.rg_ilmn
{
bottom: 0px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rg_l
{
background: none repeat scroll 0% 0% #CCC;
display: inline-block;
height: auto;
text-decoration: none;
width: auto;
}
rg_i
{
border: 0px none;
display: block;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('img').mouseover(function () {
var width = $(this).attr('width');
var height = $(this).attr('height');
var image = $(this).attr('src').substring($(this).attr('src').lastIndexOf(".") + 1);
var div = $(this).next().closest('.rg_ilm')[0];
$(div).removeAttr('style');
$('.rg_ilmn').text(width + ' * ' + height + ' type ' + image);
});
$('img').mouseout(function () {
$('.rg_ilm').css('display', 'none');
});
});</script>
</head>
<body>
<form id="form1" runat="server">
<div class="rg_di">
<a class="rg_l">
<img class="rg_i" src="Images/Chrysanthemum.jpg" width="200" height="200" />
<div class="rg_ilm rg_ilsm" style="display: none;">
<div class="rg_ilmbg">
<span class="rg_ilmn"></span>
</div>
</div>
</a>
</div>
<br />
<div class="rg_di">
<a class="rg_l">
<img class="image" src="Images/Penguins.jpg" width="200" height="200" />
<div class="rg_ilm rg_ilsm" style="display: none;">
<div class="rg_ilmbg">
<span class="rg_ilmn"></span>
</div>
</div>
</a>
</div>
<br />
</form>
</body>
</html>
Image:
Thank You.
