Офис НП AMWAY в Ярославле
Офис Амвей в Ярославле
На карте Офис AMWAY в ЯрославлеПрием и выдача заказов, презентация продукции Амвей, мастер–классы, вопросы по бизнесу Amway:
Адрес: улица Валентины Терешковой, дом 1 (Вход со двора)
Телефон: +7 (920) 112-00-91
Email: matyxho@mail.ru
Сайт: https://www.amway.ru/user/lebedem
Визитка: http://yar.meweb.ru
Иерархия статей
Статьи » HTML, CSS, JS » Увеличение изображения при наведении курсора
Сниппет
В сети есть много решений подобного рода с использованием библиотеки JQuery и всевозможных плагинов к ней. Мы же рассмотрим пример чисто на CSS 3.
Увеличение изображения при наведении курсора
Опубликовал  Pisatel Добавлено  15-05-2013 18:12 15 Май 2013 18:12:50 3149  Прочтений 3149 Прочтений  0 Комментариев 0 Комментариев
 printer
Итак, перейду сразу к сути. Нам понадобится всего один div и... Ничего более. Поместим наши изображения в этот класс- все остальное сделает таблица каскадных стилей CSS. Назовем наш класс, например, .looked. Итак, для начала- как будет выглядеть наша разметка html:

Код: HTML
<div class="looked">

<a href="#"><img src="pic1.jpg" alt="pic1"></a>

<a href="#"><img src="pic2.jpg" alt="pic2"></a>

<a href="#"><img src="pic3.jpg" alt="pic3"></a>

</div>




Ты не поверишь, но это все. Никаких id изображений, никакого лишнего кода- красота! И вот в чем фишка: для класса .looked в нашем файле CSS мы зададим параметры для всех изображений, которые будут находится в нем. Сам класс .looked описывать не буду- ты можешь сделать его на свой вкус, включи фантазию. Я лишь опишу вывод самих изображений и их поведение при наведении курсора. Для этого воспользуемся свойством hover. Для красоты я украсил изображения бордюром с тенью- ты можешь все это изменить, как и размер выводимых (70 px) и увеличенных (200 px) изображений. Итак, стиль:

Код: CSS
.looked {

/*здесь создашь любой свой стиль для этого класса- можешь украсить бордюром, добавить фоновый цвет и так далее: включай фантазию!*/

}

/* а вот далее- стиль для всех изображений в этом классе */

.looked img {

-webkit-transition: all 0.3s ease-out;

-moz-transition: all 0.3s ease-out;

-o-transition: all 0.3s ease-out;

-ms-transition: all 0.3s ease-out;

transition: all 0.3s ease-out;

background: whiteSmoke;

position: relative;

vertical-align: middle;

width: 70px;

margin: 6px 10px;

border: 1px solid #888888;

box-shadow: 0 0 5px 5px #9c9c9c;

-moz-box-shadow: 0 0 5px 5px #9c9c9c;

-webkit-box-shadow: 0 0 5px 5px #9c9c9c;

-o-box-shadow: 0 0 5px 5px #9c9c9c;

}

.looked img:hover {

-webkit-transition: all 0.3s ease-in;

-moz-transition: all 0.3s ease-in;

-o-transition: all 0.3s ease-in;

-ms-transition: all 0.3s ease-in;

transition: all 0.3s ease-in;

width: 200px;

margin: -40px;

box-shadow: 0 0 5px 5px #9c9c9c;

-moz-box-shadow: 0 0 5px 5px #9c9c9c;

-webkit-box-shadow: 0 0 5px 5px #9c9c9c;

-o-box-shadow: 0 0 5px 5px #9c9c9c;

z-index: 1;

}




Преимущество данного метода в том, что не нужно подключать сторонние библиотеки, тем самым снижая производительность сайта. Мы пользуемся лишь CSS, который, как известно, подгружается лишь раз при первой загрузке страницы.

Кроссбраузерность- все современные арбузеры, подерживающие CSS 3: вымирающих мамонтов типа IE 6, 7, 8 я лично в расчет уже давно не беру.

Пробуй, экспериментируй! Будут вопросы- пиши комментарии. Захочешь поблагодарить- просто подумай об этом: я умею читать мысли... Всех благ!
Понравилась статья?
Метки для данной статьи
Похожие статьи
Поделиться:   
Комментарии
Нет комментариев.
Добавить комментарий
Имя:

Проверочный код:
Последние активные темы форума
  Темы Просмотров Ответов Последние сообщения
folder Вопрос по переделке bb-кода
PHP, MySQL
805 5 Pisatel
26. мая 2017
folder Вопросы по Ajax форме обратной связи
CMS PHP Fusion
5062 48 Ditrin
19. февраля 2017
folder BBCode YouTube Video Colorbox mod
CMS PHP Fusion
5955 2 Pisatel
10. декабря 2016
folder Как лучше создать собственную страницу?
CMS PHP Fusion
3769 17 Pisatel
11. мая 2016
folder Небольшие вопросы по скриптам магазина и катало...
PHP, MySQL
37536 80 Pisatel
11. января 2016
folder BBCode Code mod
CMS PHP Fusion
2835 0 Pisatel
31. августа 2015
folder Ajax Like Dislike Article Panel
CMS PHP Fusion
5104 16 Pisatel
07. июля 2015
folder Хлебные крошки / BreadCrumbs SEO Panel
CMS PHP Fusion
5638 17 Pisatel
04. июля 2015
folder Abbr Description BBCode
CMS PHP Fusion
2056 0 Pisatel
15. июня 2015
folder Плагин Email рассылки Mail To All by Pisatel
CMS PHP Fusion
7915 32 Pisatel
26. апреля 2015
folder Подозрительный трафик и прочие страшилки
Всякая хрень
3302 2 Ditrin
23. апреля 2015
folder Мод Newsletter - рассылка писем пользователям с...
CMS PHP Fusion
4835 13 Pisatel
10. апреля 2015
folder Мод отправки писем PHPMailer для PHP-Fusion
CMS PHP Fusion
23245 113 Ditrin
06. апреля 2015
folder Появление неизвестного файла subscriptions.php
CMS PHP Fusion
2497 2 Pisatel
06. апреля 2015
folder Autoban on IP
CMS PHP Fusion
10417 13 Pisatel
03. апреля 2015