Увеличение при наведении курсора мыши
Главная » Сайтостроение
Опубликовано: Рубрика: СайтостроениеАвтор: Валерий Бородин
Здравствуйте, уважаемые друзья и гости блога! Сейчас Вы узнаете, как сделать полномасштабной картинку при наведении курсора мыши на нее: увеличение при наведении. Это делается очень просто при помощи CSS. Применение данной методики у Вас не займет много времени и сил, а также не потребует каких либо определенных знаний языка кодирования.
Вам просто нужно будет скачать предоставленный мной файл с уже готовым кодом и установить его в определенном, нужном для Вас месте на сайте и все. И у Вас будет готово полномасштабное увеличение картинки курсора мыши, то есть когда Вы наведете на маленькое изображение курсор мыши оно увеличится до полного размера.
И так, давайте же узнаем, как делается увеличение при наведении при помощи CSS …
Если мы с вами хотим сделать картинки на нее курсора мыши, то нам потребуется проделать следующее …
Копируем данный код и вставляем его в вашу HTML страницу между тегами <head></head>:
<style type="text/css"> /* Код увеличителя начинается здесь */ /* Если ваше изображение не связано ссылкой с другой страницей, оставьте ссылку в виде <a href="#nogo"> Иначе увеличительне будет работать в IE6 */ .ienlarger { float: left; clear: none; /* Можно установить left или right по необходимости */ padding-bottom: 5px; /* Расстояние между миниатюрами. Лучше не трогать данное поле */ padding-right: 5px; /* Расстояние между миниатюрами и окружающим текстом */ } .ienlarger a { display:block; text-decoration: none; /* Если добавить правило cursor:default;, то отключится курсор в виде руки */ } .ienlarger a:hover{ /* Не надо изменять тип позиционирования */ position:relative; } .ienlarger span img { border: 1px solid #FFFFFF; /* Добавляем рамку вокруг изображения */ margin-bottom: 8px; /* /Сдвигаем текст вниз от изображения */ } .ienlarger a span { /* Для большого изображения и названия */ position: absolute; display:none; color: #FFCC00; /* Текст названия */ text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 13px; /* Размер шрифта названия */ background-color: #000000; font-weight: bold; padding-top: 10px; padding-right: 10px; padding-bottom: 13px; padding-left: 10px; } .
ienlarger img { /* Для IE, чтобы не было рамки вокруг ссылки */ border-width: 0; } .ienlarger a:hover span { display:block; top: 50px; /* Большое изображение выскакивает вверх на 50px от миниатюры */ left: 90px; /* Большое изображение выскакивает влево на 90px от миниатюры */ z-index: 100; /* Если добавить правило cursor:default;, то отключится курсор в виде руки на большом изображении */ } .resize_thumb { width: 150px; /* Вводим нужный размер миниатюры здесь */ height : auto; } /* Код увеличителя закончен */ </style>
Теперь после открывающегося тега <body> вставляем следующий код:
<div class="ienlarger"><a href="https://pribylwm.ru"><img src="https://img406.imageshack.us/img406/4920/63734582.jpg" alt="thumb" class="resize_thumb" /><span> <img src="https://img406.imageshack.us/img406/4920/63734582.jpg" alt="large" /><br /> Здесь Вы можете написать свой текст.</span></a></div> <div class="ienlarger"><a href="https://twitter.com/pribylwm"><img src="https://img257.imageshack.us/img257/1926/92628379.jpg" alt="thumb" class="resize_thumb" /><span> <img src="https://img257.imageshack.us/img257/1926/92628379.jpg" alt="large" /><br /> Здесь Вы можете написать свой текст.</span></a></div> <div class="ienlarger"><a href="https://vk.com/wpzarabotok"><img src="https://img442.imageshack.us/img442/6325/87011940.jpg" alt="thumb" class="resize_thumb" /><span> <img src="https://img442.imageshack.us/img442/6325/87011940.jpg" alt="large" /><br /> Здесь Вы можете написать свой текст.</span></a></div> <div class="ienlarger"><a href="https://www. facebook.com/groups/1065415996857887/"><img src="https://img691.imageshack.us/img691/7360/89815502.jpg" alt="thumb" class="resize_thumb" /><span> <img src="https://img691.imageshack.us/img691/7360/89815502.jpg" alt="large" /><br /> Здесь Вы можете написать свой текст.</span></a></div> <br style="clear:left" />
Тут Вы можете посмотреть пример, что будет если Вы все правильно сделали и увеличение при помощи CSS должно работать как здесь: увеличение при наведении курсора на картинку
Здесь Вы можете скачать файлы для использования у себя, чтобы сделать увеличение картинки: скачать увеличение при наведении
Если вам понравился материал пожалуйста сделайте следующее…
- Поставьте «лайк».
- Сделайте ретвит.
- Поделитесь этим постом с друзьями в социальных сетях.
Спасибо за внимание!
Всегда ваш Валерий Бородин
2 611
Понравилась статья? Поделиться с друзьями:
Прозрачность opacity
Свойство opacity
определяет уровень прозрачности элемента.
Прозрачность изображения
Свойство opacity
принимает значение от 0.0 до 1.0. Чем меньше значение, тем прозрачнее элемент:
opacity 0.2
opacity 0.5
opacity 1
(по умолчанию)
img { opacity: 0.5; }
Изменение прозрачности при наведении мыши
Очень часто свойство opacity
используется вместе с селектором :hover
, чтобы изменять прозрачность элемента при наведении на него мыши:
img { opacity: 0.5; } img:hover { opacity: 1.0; }
Объяснение примера
Первая CSS декларация аналогична той, что мы приводили в первом примере. Дополнительно к этому, мы добавили то, что должно происходить, когда пользователь наводит на одно из изображений. В данном случае при наведении пользователем мыши, отменяется прозрачность изображения. CSS код для этого — opacity: 1;
.
Когда указатель мыши уводится с изображения, оно опять становится прозрачным.
Ниже пример с обратным эффектом:
img:hover { opacity: 0.5; }
Прозрачный блок
Если к фону элемента добавлять прозрачность при помощи свойства
, то все дочерние элементы будут наследовать эту прозрачность. Это может привести к тому, что текст внутри полностью прозрачного элемента будет трудно читать:
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
Пример:
div { background-color: green; opacity: 0.3; }
Определение прозрачности при помощи RGBA
Если вы хотите, чтобы прозрачность не применялась к дочерним элементам, как в примере выше, то вы можете использовать RGBA значения цвета. В следующем примере прозрачность задается только для фонового цвета, но не для текста:
100% opacity
60% opacity
30% opacity
10% opacity
В главе Как использовать цвета вы узнали, что вы можете использовать RGB как значение цвета. Дополнительно к этому вы можете использовать RGB значение цвета с альфа-каналом (RGBA), который определяет прозрачность цвета.
RGBA значение цвета определяется CSS функцией rgba(red, green, blue, alpha). Параметр alpha — это число от 0.0 (полная прозрачность) до 1.0 (полная непрозрачность).
Подробнее о RGBA цветах вы можете прочитать в главе RGB цвета.
Пример:
div { background: rgba(76, 175, 80, 0.3) /* Фон зеленого цвета с 30% прозрачностью */ }
Текст в прозрачном блоке
Это кое-какой текст, размещенный в прозрачном блоке.
<html> <head> <style> div.background { background: url(klematis.jpg) repeat; border: 2px solid black; } div.transbox { margin: 30px; background-color: #ffffff; border: 1px solid black; opacity: 0.6; } div.transbox p { margin: 5%; font-weight: bold; color: #000000; } </style> </head> <body> <div> <div> <p>Это кое-какой текст, размещенный в прозрачном блоке.</p> </div> </div> </body> </html>
Объяснение примера
Сначала мы создаем элемент <div> (class=»background») с фоновым изображением и рамкой.
Затем мы создаем еще один элемент <div> (class=»transbox») внутри первого элемента <div>.
У элемента <div> есть фоновый цвет и рамка, сам элемент прозрачный.
Внутри прозрачного элемента <div> мы добавили кое-какой текст, обернутый в тег <p>.
Масштабирование изображения при наведении курсора, клике, наведении курсора
Привлекайте посетителей и увеличивайте продажи с помощью нашего
Феноменального масштабирования изображения
Рейтинг: 4,9 (61 отзыв) s и поддержка сетчатки .
За последние пару лет весы сместились с настольных компьютеров на мобильные устройства. Очень важно, чтобы ваш сайт хорошо выглядел на телефонах и планшетах. Magic Zoom Plus не мешает вам, наоборот — это одно из самых элегантных решений для демонстрации изображений товаров. Полная поддержка сетчатки, интуитивно понятные сенсорные жесты и высокая скорость загрузки делают его лучшим выбором для масштабирования изображений.
Быстрый и сложный Изящный и настраиваемый с помощью CSS
Годы напряженной работы были вложены в Magic Zoom Plus, чтобы сделать его лучшим инструментом масштабирования изображений JavaScript на рынке. Он не зависит от фреймворка и хорошо работает с jQuery/Zepto, а также с Bootstrap, Foundation, Bulma или любым другим фреймворком CSS, который вы выбрали. Вы можете сделать так, чтобы Magic Zoom Plus выглядел именно так, как вы хотите, за считанные минуты. Ознакомьтесь с нашим руководством по интеграции для получения дополнительной информации.
Используется лучшими Присоединяйтесь к компании Google, Coca-Cola и более чем 40 000 других компаний
Мы стремимся создать лучший в мире инструмент для масштабирования изображений. Мы упорно работали последние 10 лет, чтобы достичь этой цели. Выбирая Magic Zoom Plus, вы не только получаете лучший в своем классе инструмент масштабирования изображения, но и получаете поддержку, которая действительно решит ваши проблемы.
Начните работу за считанные минуты Без написания единой строки кода.
Magic Zoom Plus доступен для WordPress, Magento, Shopify, WooCommerce и других популярных платформ! Если ваш веб-сайт создан на заказ, просто используйте автономный скрипт масштабирования изображения JavaScript. Если вам нужна какая-либо помощь, наша дружная команда поддержки готова помочь!
Получите Magic Zoom Plus уже сегодня!
Посмотреть цены Скачать бесплатную пробную версию
Наши инструменты используются на веб-сайтах
5 8 , 5 2 0 (и считая).Выберите свою платформу Установите Magic Zoom Plus на свой сайт, не написав ни строчки кода
Или установите его на любой сайт с помощью этих простых инструкций.
Делайте что угодно с Magic Zoom Plus
- Включите видео
- Добавить 360 вращений
- Использование увеличительного стекла
- Полноэкранное увеличение изображения
- Увеличение изображения по клику