Офис НП 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 3849  Прочтений 3849 Прочтений  1 Комментарий 1 Комментарий
 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 я лично в расчет уже давно не беру.

Пробуй, экспериментируй! Будут вопросы- пиши комментарии. Захочешь поблагодарить- просто подумай об этом: я умею читать мысли... Всех благ!
Понравилась статья?
Метки для данной статьи
Похожие статьи
Поделиться:   
Комментарии
#1 | StepSwano 24 марта 2020 02:41:14
No Avatar
Гость
Cialis 10 Mg Ohne Rezept buy online cialis Tadalafil En Ligne 60mg <a href=https://apcialisle.com/#>Cialis</a> Blue Pill Canadian Pharmacy
Добавить комментарий
Имя:

Проверочный код:
Последние активные темы форума
  Темы Просмотров Ответов Последние сообщения
folder Плагин Email рассылки Mail To All by Pisatel
CMS PHP Fusion
14902 33 promask
27. апреля 2019
folder Вопрос по переделке bb-кода
PHP, MySQL
3824 5 Pisatel
26. мая 2017
folder Вопросы по Ajax форме обратной связи
CMS PHP Fusion
16183 48 Ditrin
19. февраля 2017
folder BBCode YouTube Video Colorbox mod
CMS PHP Fusion
8366 2 Pisatel
10. декабря 2016
folder Как лучше создать собственную страницу?
CMS PHP Fusion
8336 17 Pisatel
11. мая 2016
folder Небольшие вопросы по скриптам магазина и катало...
PHP, MySQL
57288 80 Pisatel
11. января 2016
folder BBCode Code mod
CMS PHP Fusion
4528 0 Pisatel
31. августа 2015
folder Ajax Like Dislike Article Panel
CMS PHP Fusion
8855 16 Pisatel
07. июля 2015
folder Хлебные крошки / BreadCrumbs SEO Panel
CMS PHP Fusion
10487 17 Pisatel
04. июля 2015
folder Abbr Description BBCode
CMS PHP Fusion
3490 0 Pisatel
15. июня 2015
folder Подозрительный трафик и прочие страшилки
Всякая хрень
6950 2 Ditrin
23. апреля 2015
folder Мод Newsletter - рассылка писем пользователям с...
CMS PHP Fusion
8723 13 Pisatel
10. апреля 2015
folder Мод отправки писем PHPMailer для PHP-Fusion
CMS PHP Fusion
45838 113 Ditrin
06. апреля 2015
folder Появление неизвестного файла subscriptions.php
CMS PHP Fusion
4123 2 Pisatel
06. апреля 2015
folder Autoban on IP
CMS PHP Fusion
14801 13 Pisatel
03. апреля 2015