<!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" xml:lang="ru" lang="ru" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Форумы</title>
</head>
<body style="width:100%;">
<style type="text/css">
.item {
z-index:25;
*!*
left:50%;
margin-left:-68px;
*/!*
padding:0;
background:#000;
width:137px;
height:117px;
display:inline-block;
position:relative;
}
.item .link{
z-index:25;
margin:0 auto;
position:absolute;
background:#000;
text-align:center;
display:block;
width:137px;
height:117px;
line-height:109px;
color:#909090;
}
.item .link:hover{
background:url(http://www.fotodiva.ru/images/pg/menu/current.png) no-repeat center;
}
.item img{
z-index:-5;
top:0;
left:0;
position:absolute;
transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
-ms-transition-duration: 0.4s;/* IE9+ */
}
.item img{
position:absolute;
}
.item:hover img.pos_l{
top: 0px;
left: -138px;
}
.item:hover img.pos_2{
top: -118px;
left: 0px;
}
.item:hover img.pos_3{
top: 118px;
left: 0px;
}
.item:hover img.pos_4{
top: 0px;
left: 138px;
}
</style>
<div id="item_1" class="item">
<a href="/gallery/" class="link">Фотогалерея</a>
<img class="photo pos_l" src="http://www.fotodiva.ru/images/2/1277899211.jpg"/>
<img class="photo pos_2" src="http://www.fotodiva.ru/images/2/1277889753.jpg"/>
<img class="photo pos_3" src="http://www.fotodiva.ru/images/2/1277723402.jpg"/>
<img class="photo pos_4" src="http://www.fotodiva.ru/images/2/1277889612.jpg"/>
</div>
</body>
</html>
margin-left: -1/2ширины блока (137px)