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 устанавливает расстояние между картинками и текстом.    Результаты можно посмотреть, наведя курсор на каждую из картинок. Недостатком метода является изменение размеров страницы по горизонтали и вертикали при увеличении изображений. |
|
|
| Всего комментариев: 0 | |