Показать сообщение отдельно
  #8 (permalink)  
Старый 01.09.2012, 22:01
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Игорек,
Ну возможно так :
<html>
<head>

<title>Natasha Zamuraeva</title>
<style type="text/css">
body,#wraper{
 width:1000px;

}
#wraper,
#container,
#menu {
  background:#000;
  text-align:center;
  margin:0 auto;
}
.item {
  z-index:25;
  padding:0;
  background:transparent;
  width:137px;
  height:117px;
  display:inline-block;
  position:relative;
 transition-duration: 0.3s;
  -webkit-transition-duration:  0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration:  0.3s;
  -ms-transition-duration:  0.3s;/* IE9+ */
}
.item:hover {
  margin-right:137px;
  margin-left:137px;
}
.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:hover  .link{
  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>
<script language="JavaScript" type="text/javascript" src="link_js.js"></script>
</head>

<body>

<div id="wraper">
		<div id="container">
			<div id="menu">
				<div id="empty">&nbsp;</div>

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

				<div id="item_1" class="item">
					<a href="/about/" class="link">Об авторе 1</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>

				<div id="item_1" class="item">
					<a href="/forum/" 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>

				<div id="item_1" class="item">
					<a href="/contacts/" 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>

				<div id="item_1" class="item">
					<a href="/about/" 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>

			</div>
		</div>
	</div>
</div>

</body>
</html>

Последний раз редактировалось Deff, 01.09.2012 в 22:22.
Ответить с цитированием