Главная » 2013 » Октябрь » 19 » Еще один способ увеличения изображений
14:35
Еще один способ увеличения изображений

Размеры фотографий, расположенных горизонтально в один ряд будут увеличиваться при наведении на них курсора, если применить указанный ниже код

<div class="dszoomimg"><img src="http://smotri.te.ua/images/2013-10/items.1381228518-8.b.jpg" class="dszoom" alt="Бухта"><img src="http://smotri.te.ua/images/2013-10/items.1381228521-1.b.jpg" class="dszoom" alt="Горы"><img src="http://smotri.te.ua/images/2013-10/items.1381228520-10.b.jpg" class="dszoom" alt="Сосна"></div><style>.dszoomimg {display:table;margin:2 auto;padding:15px;}img.dszoom {-webkit-transition: all 0,75s ease-out;-moz-transition: all 0.75s ease-out;-o-transition: all 0.75s ease-out;-ms-transition: all 0.75s ease-out;transition: all 0.75s ease-out;background: green;width: 100px;border: 3pxsolid green;margin: 10px;box-shadow: 0 0 9px rgba(0,0,0,0.3);position: relative;vertical-align: middle;}img.dszoom:hover {-webkit-transition: all 0.75s ease-in;-moz-transition: all 0.5s ease-in;-o-transition: all 0.5s ease-in;-ms-transition: all 0.75s ease-in;transition: all 0.75s ease-in;width: 500px;margin: -2px;box-shadow: 0 10px 15px rgba(0,0,0,0.4);z-index: 7;}</style>

Зеленым цветом в коде выделены адреса картинок, красным - время изменения размеров, сиреневым - размер рамки, синим - цвет рамки, коричневым - ширина фотографий до и после увеличения.

Зеленым цветом в коде выделены адреса картинок, красным - время изменения размеров, сиреневым - размер рамки, синим - цвет рамки, коричневым - ширина фотографий до и после увеличения.

Тегом margin задается расстояние между изображениями.
Тег padding устанавливает расстояние между картинками и текстом.
БухтаГорыСосна

Результаты можно посмотреть, наведя курсор на каждую из картинок. Недостатком метода является изменение размеров страницы по горизонтали и вертикали при увеличении изображений.
Просмотров: 617 | Добавил: ездун | Рейтинг: 5.0/1
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]