Перейти к содержимому



Увеличение фото при наведении курсора.

#1 imflint

imflint
  • Неактивные
  • 16 сообщений
  • Репутация: 0
0

Отправлено 06 Июль 2009 - 22:44

Хочу сделать фотогаллерею работ (партфолио)
с эффектом увеличения фото при наведении курсора,
вот что получилось:
<style type="text/css">
body {
		margin:0;
		padding:100px 150px;
		background:#fff;
		font:70% Arial, Helvetica, sans-serif;
		color:#555;
		line-height:180%;
		}
	h1, h2{
		font-size:100%;
		font-weight:normal;
		color:#555;
		}
	h2{
		font-size:140%;
		}	
	p{
		margin:0;
		padding:1em 0;
		width:500px;
		clear:both;
		}
	a{
		color:#f20;
		text-decoration:none;
		}
	a:hover{
		color:#999;
		}
	img{
		border:none;
		}
	
	/* // here comes the goodnes  */	
	
		ul#gallery, ul#gallery li{
			margin:0;
			padding:0;
			list-style:none;
			}
		ul#gallery{
			margin:2em 0;
			}			
		ul#gallery li{
			float:left;
			display:inline;
			margin-right:5px;
			}								
		ul#gallery a{
	float:left;
	display:inline;
	position:relative;
	width: 150;
	height: 100;
			}	
		ul#gallery a:hover{
			background:none;
			z-index:100;
			}	
		ul#gallery a span{
			display:none;
			}
		ul#gallery a:hover span{
			float:left;
			display:block;
			cursor:pointer;
			}
		ul#gallery a:hover em{
			display:none;
			}				
		ul#gallery a img{
			border:1px solid #999;
			padding:2px;
			background:#fff;
			}	
		ul#gallery a:hover img{
			border:1px solid #000;
			}											



</style>
<ul id="gallery">
			<li>
				<a href="http://pidkova.net">
					<em><img src="IMG_115.JPG" alt="gallery thumbnail" width="150" height="100" /></em>
					<span><img src="IMG_115.JPG" alt="gallery image" /></span>				</a>			</li>
Подскажите пожалуйста как сделать так чтоб фотки увеличивались плавно, как тут --> http://akcent.biz.ua...dukt.php?name=2

 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Увеличение изображения
  2. Убрать подсказку, всплывающую при наведении на ссылки категорий WordPress!
  3. Всплывающие изображения.
  4. Как сделать, чтобы при наведении курсора линии подсвечивались
  5. Как сделать анимирование графической ссылки при наведении курсора?

#2 FordogeN

FordogeN
  • Неактивные
  • 1 414 сообщений
  • Репутация: 0

Отправлено 07 Июль 2009 - 00:36

Подскажите пожалуйста как сделать так чтоб фотки увеличивались плавно, как тут --> http://akcent.biz.ua...dukt.php?name=2

Плавно - эт уже на ява скрипте :)
  • 0

Как настроить выдержку и диафрагму зеркального фотоаппарата



#3 imflint

imflint
    Topic Starter
  • Неактивные
  • 16 сообщений
  • Репутация: 0

Отправлено 07 Июль 2009 - 00:51

Плавно - эт уже на ява скрипте :)

На яве эт хорошо! Только обьясните как там и что писать надо ? ))
Буду весьма признателен!! ;)
  • 0

#4 ZiTosS

ZiTosS
  • Неактивные
  • 5 148 сообщений
  • Репутация: 8

Отправлено 07 Июль 2009 - 01:27

imflint, почитайте в google про lightBox и поставьте лучше его чем мучаться с этим скриптом. Но если хотите, то вставляйте вот этот JS код к себе:
http://akcent.biz.ua/mod/popup.js
а затем таким же образом прописывайте ссылки. И вс будет работать xD
  • 0

#5 Silencio

Silencio
  • Неактивные
  • 3 сообщений
  • Репутация: 0

Отправлено 13 Июль 2009 - 13:21

ZiTosS

Спасибо за совет
  • 0


Оформление форума – IPBSkins.ru