как вариант:
<html>
<head>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function( ){
//jquery
$('.block').hover(
function()
{
$(this).children().eq(0).stop().animate({opacity: "0.1"}, 300);
},
function()
{
$(this).children().eq(0).stop().animate({opacity: "0.8"}, 300);
})
});
</script>
</script>
<style type="text/css">
body
{
background-color: green;
}
.block
{
width: 200px;
height: 200px;
position: relative;
}
.child
{
width: 200px;
height: 200px;
position: absolute;
top: 0px;
left: 0px;
}
.bg
{
background-color: black;
opacity: 0.8;
}
.content
{
font-family: arial;
font-size: 15px;
color: white;
}
</style>
</head>
<body>
<div class="block">
<div class="child bg"></div>
<div class="child content">123232323123123123</div>
</div>
</body>
</html>