Офис НП 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 Май 2013 18:12:50
5390 Прочтений
Итак, перейду сразу к сути. Нам понадобится всего один div и... Ничего более. Поместим наши изображения в этот класс- все остальное сделает таблица каскадных стилей CSS. Назовем наш класс, например, .looked. Итак, для начала- как будет выглядеть наша разметка html:
Ты не поверишь, но это все. Никаких id изображений, никакого лишнего кода- красота! И вот в чем фишка: для класса .looked в нашем файле CSS мы зададим параметры для всех изображений, которые будут находится в нем. Сам класс .looked описывать не буду- ты можешь сделать его на свой вкус, включи фантазию. Я лишь опишу вывод самих изображений и их поведение при наведении курсора. Для этого воспользуемся свойством hover. Для красоты я украсил изображения бордюром с тенью- ты можешь все это изменить, как и размер выводимых (70 px) и увеличенных (200 px) изображений. Итак, стиль:
Преимущество данного метода в том, что не нужно подключать сторонние библиотеки, тем самым снижая производительность сайта. Мы пользуемся лишь CSS, который, как известно, подгружается лишь раз при первой загрузке страницы.
Кроссбраузерность- все современные арбузеры, подерживающие CSS 3: вымирающих мамонтов типа IE 6, 7, 8 я лично в расчет уже давно не беру.
Пробуй, экспериментируй! Будут вопросы- пиши комментарии. Захочешь поблагодарить- просто подумай об этом: я умею читать мысли... Всех благ!
Код: 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 я лично в расчет уже давно не беру.
Пробуй, экспериментируй! Будут вопросы- пиши комментарии. Захочешь поблагодарить- просто подумай об этом: я умею читать мысли... Всех благ!
Понравилась статья?
Метки для данной статьи
Похожие статьи
Заголовок
Категория
Просмотров
Поделиться:
Последние активные темы форума
| Темы | Просмотров | Ответов | Последние сообщения | |
 |
Вопрос по переделке bb-кода PHP, MySQL |
19224 | 5 | Pisatel 26. мая 2017 |
|
Вопросы по Ajax форме обратной связи CMS PHP Fusion |
53843 | 48 | Ditrin 19. февраля 2017 |
|
BBCode YouTube Video Colorbox mod CMS PHP Fusion |
13435 | 2 | Pisatel 10. декабря 2016 |
|
Как лучше создать собственную страницу? CMS PHP Fusion |
15701 | 17 | Pisatel 11. мая 2016 |
|
Небольшие вопросы по скриптам магазина и катало... PHP, MySQL |
115773 | 80 | Pisatel 11. января 2016 |
|
BBCode Code mod CMS PHP Fusion |
12165 | 0 | Pisatel 31. августа 2015 |
|
Ajax Like Dislike Article Panel CMS PHP Fusion |
19444 | 16 | Pisatel 07. июля 2015 |
|
Хлебные крошки / BreadCrumbs SEO Panel CMS PHP Fusion |
22341 | 17 | Pisatel 04. июля 2015 |
|
Abbr Description BBCode CMS PHP Fusion |
6712 | 0 | Pisatel 15. июня 2015 |
|
Плагин Email рассылки Mail To All by Pisatel CMS PHP Fusion |
32019 | 32 | Pisatel 26. апреля 2015 |
|
Подозрительный трафик и прочие страшилки Всякая хрень |
10498 | 2 | Ditrin 23. апреля 2015 |
|
Мод Newsletter - рассылка писем пользователям с... CMS PHP Fusion |
16330 | 13 | Pisatel 10. апреля 2015 |
|
Мод отправки писем PHPMailer для PHP-Fusion CMS PHP Fusion |
104389 | 113 | Ditrin 06. апреля 2015 |
|
Появление неизвестного файла subscriptions.php CMS PHP Fusion |
7930 | 2 | Pisatel 06. апреля 2015 |
|
Autoban on IP CMS PHP Fusion |
21550 | 13 | Pisatel 03. апреля 2015 |