как сделать так чтобы при наведении на картинку она увеличивалась в html
Как сделать так чтобы при наведении на картинку она увеличивалась в html
★ Чистый HTML
★ Чистый CSS
★ Чистый JavaScript
★ Пошаговое увеличение размера
★ Увеличение картинки с надписью
Представлены способы перехода от малого размера картинки к большому. Из этих способов можно выбрать как увеличение изображения по наведению курсора, так и по клику (щелчку курсора).
Кодировка без использования стиля (чистый HTML)
Способ 3 При 1-ом щелчке увеличение и появление лупы. При 2-ом щелчке еще увеличение (до размера оригинала). При дальнейших щелчках пересменка увеличенных изображений. Для возврата к исходному размеру нужно щелкнуть вне поля рисунка. Усовершенствованный аналог Способа 1, но устраняет трудности, которые могут возникнуть с возвращением к исходному окну. Благодаря target=»_blank» увеличенный рисунок открывается в новом окне. Последний параметр довольно важен, поскольку зачастую из-за неопытности пользователя может возникнуть следующая ситуация: открыв страницу с картинкой, он не знает как вернутся назад и поэтому просто закрывает вкладку, а значит полностью покидает сайт. Чтобы остаться на сайте, нужно сделать переход по стрелке ‘назад’ или закрыть окно. <a target=»_blank» href=»31.jpg»> <img width=»100″ height=»70″ src=»http://data5r.narod.ru/31.jpg»></a> 
Увеличение за счет чистого стиля
Увеличение за счет чистого JavaScript
Способ 7 Можно произвести увеличение размера, используя только JavaScript.
Как реализовать увеличение картинки при наведении курсора CSS
Скорее всего, вы сталкивались с таким эффектом как увеличение картинки при наведении курсора при посещении интернет-магазинов. При наведении курсора мыши на разные части изображения товара они отображаются в увеличенном виде.
В этой статье рассказывается о том как реализовать увеличение картинки при наведении курсора CSS и JavaScript без использования библиотеки jQuery.
HTML-код довольно простой: строка разделена на два столбца. Первый из них содержит два изображения, превью которых будет выводиться. Второй содержит div с идентификатором ‘preview’, который будет отображать превью. Оба изображения имеют одинаковую ширину и высоту.
Для preview div него задан определенный размер, границы и отступы. Свойство background-repeat: no-repeat гарантирует, что фоновое изображение не будет повторяться. margin-left: auto и margin-right: auto выравнивают этот div по центру относительно родительского элемента.
JavaScript
С помощью JavaScript реализован ключевой код, благодаря которому работает превью. Разделим его написание на шаги.
Шаг 1
Сначала используются функции ‘zoomIn’ и ‘zoomOut ‘, чтобы увеличивать и уменьшать изображения. Данные функции определены в JavaScript. Я подключил к этим двум функциям два события – onmousemove и onmouseout соответственно.
Шаг 2
Шаг 3
В функции zoomIn задано visibility visible. Всякий раз, когда курсор мыши перемещается по изображениям, будет виден div с превью. В остальных случаях он будет скрыт.
Как изображение увеличивается в div preview?
Я установил для изображения ширину и высоту 100px и 250px. Но его реальные размеры гораздо больше. Так как я не установил это же ограничение размера для фонового изображения div preview, то оно принимает его полную ширину и высоту. Ширина и высота этого блока меньше ширины фонового изображения. Поэтому оно не полностью покрывает весь div и создает ощущение, будто изображение увеличивается.
Шаг 4
Я использовал отрицательные значения posX и posY, чтобы фон изображения превью перемещался в направлении, противоположном движению курсора мыши.
Кроме этого, некоторые числа умножаются на posX и posY, чтобы можно было видеть изображение превью полностью при движении курсора.
Ниже представлена полная версия исходного кода анимации.
Пожалуйста, оставьте свои отзывы по текущей теме статьи. За комментарии, подписки, отклики, дизлайки, лайки низкий вам поклон!
Пожалуйста, опубликуйте свои отзывы по текущей теме статьи. За комментарии, подписки, отклики, лайки, дизлайки низкий вам поклон!
Плавное увеличение изображения при наведении на чистом CSS3
Этот приём с картинками я использую у себя на блоге. Когда пользователь наводит на миниатюру любой записи она плавно увеличивается. Согласитесь, довольно не плохо и красиво смотрится.
И делается это только с помощью CSS3, и довольно таки просто. Сейчас я Вам расскажу как это делать.
Как это работает Вы можете посмотреть в демо и у меня на блоге на главной странице.
Плавное увеличение картинки при наведении только на CSS3.
Для начала нам нужно подготовить не сложную разметку html для наших картинок, в данном случае у нас их будет 3.
Как видите, что все картинки имеют класс image к которому мы, собственно, и будем задавать параметры.
А вот как выглядят стили:
И обязательно ставим правило overflow:hidden; Оно нужно для того, чтобы наше изображение не выходило за рамки блока при увеличении.
Теперь задаём правила для самих изображений:
Анимация происходит с помощью параметра transition и transform в CSS3. На всю анимацию у нас уходит одна секунда. Если Вы хотите, чтобы картинка быстрее увеличивалась, уменьшите это значение.
В демо картинка увеличивается 1.1 раза. Если поставить значение 2, то картинка увеличится в два раза и так далее.
Вот и всё, друзья. Как и обещал, что урок будет очень простым. Надеюсь Вам понравился этот простой эффект для картинок. До скорых встреч.
Увеличение изображения на сайте – очень простой способ
Конечно, способов увеличения изображений существует достаточно много. И в основном используются применения скриптов и плагинов. По-моему мнению такие методы оправданы в случае ресурсов с огромным количеством фотографий или каких-либо картинок. Мой блог не такой. И, как обычно, я иду по пути наименьшего затрат времени, знаний и ресурсов своего сайта.
Предлагаю вам способ увеличения картинки на сайте без использования каких-либо скриптов, а исключительно с помощью html.
Такой способ увеличения изображения на сайте позволит читателю быстро посмотреть картинку, ведь вашему сайту не надо будет дополнительно делать загрузку скриптов.
Увеличение изображения на сайте
1 способ – увеличение изображения на сайте при наведении курсора
Очень простой, ну наипростейший способ, честное слово. Надо добавить следующий код к свойствам картинки:
Полностью это будет выглядеть так
Вот результат и код для картинки с киской.
При наведении курсора мыши картинка увеличивается.
Надеюсь, вы понимаете, что все это делается в текстовом редакторе.
2 способ – увеличение картинки на сайте при клике мыши
Способ аналогичный, просто onmouseover надо заменить onclick. К свойствам картинки добавляется следующий код:
Полностью это будет выглядеть так
Вот результат и код для картинки с киской.
При клике мыши картинка увеличивается до размеров оригинального изображения или заданных вами. Для уменьшения размеров, то есть вернуть картинку в исходный размер, просто кликните в любое место страницы.
Надеюсь вам не показалось сложным использовать такие способы – с помощью html – сделать увеличение изображения на сайте.
Вообще, я считаю, многое веб-мастера не ограничиваются просто использованием какого-либо движка и применяют html-коды на своих сайтах.
Читайте также:
Возможно Вас также заинтересует:
19 комментариев
Я тоже думаю, что с помощью html лучше увеличивать картинки, чем устанавливать различные плагины, тормозящие сайт
Первый способ хороший, но есть один момент, который рвёт шаблон — при наведении мыша картинка увеличивается сразу. Благо, в CSS3 есть замечательное свойство transition, с помощью которого можно «эротизировать» картинку. Для этого можно чуть дополнить событие, хотя бы так:
onmouseover=”this.style.width=’1000px’;this.style.transition=’all 1s’;”
😉
Всегда увеличиваю картинки с помощью html, для меня это как то проще что ли))) при этом отдаю предпочтение увеличению по клике мышки.
С помощью html можно только в новом окне открыть.
PS: зря советом не воспользовались, transition делает эффект намного привлекательнее.
Искал что-то подобное) спасибо)хочу использовать у себя на сайте, возможно как-то доработаю)
Для второго уж очень hover просится. Так не очень понятно, что можно при нажатии увеличить картину. А так вообще довольно полезная статья и без воды. Спасибо.
Очень удобный инструмент, заберу себе в “копилку”. Интересно было бы еще почитать про смену одной картинки на другую при наведении или клике. И название статьи хорошо бы подкорректировать, добавить что увеличение картинки при наведении курсора или клике. Изначально ожидала прочитать про то как взять маленькое изображение и ввести в html параметры ширины и длины картинки отображаемой на странице. Но, в прочтении не разочарована.
Вау! Круто! Особенно понравился первый способ, может и применю. Правда я пользуюсь плагином для увеличения и если его деактивировать, то придется переделывать все картинки, а это долго. Но все равно, спасибо за науку.
Да, с плагинами удобно 
, я сама их люблю
Тогда заходите в гости на мою статью kosolapovblog.ru/plagin-uvelicheniya-kartinki-i-top-kommentatorov.html и просто в гости
Как увеличить изображение: варианты на CSS и JavaScript
Использовать ссылку.
Ограничить высоту картинки с помощью :hover.
Увеличить фото благодаря фокусу :focus.
Увеличить фотографию с помощью позиционирования.
Использование CSS3: увеличение фотографии при клике.
Расширить изображение с помощью свойства transform.
Использовать :after.
Как увеличить изображение с помощью скрипта JavaScript.
37 комментариев:
anya При расширении большого количества изображений с помощью HTML5 они сами выстраиваются в каскад.Скажите как сделать так,чтобы они выстраивались в прямые линии??
спасибо! NMitra После картинки напишите
anya Получилось,но вертикально,а как сделать их в ряд по горизонтали? NMitra Уберите действие из комментария 2 и пробелы между кодом картинок.
См. подробнее http://shpargalkablog.ru/2011/04/css-nalozhenie.html Анонимный отрегулировать картинку по центру я смог, но не смог никак сделать чтобы при открытии картинки, страница не не сползала вниз. я наверное как то не правильно объясняю то что хочу сделать. Анонимный хочу исправить ошибку. «страница не сползала вниз» NMitra При использовании :target не получиться. 🙁 NMitra Исправила статью, замечания учтены. Дмитрий Спасибо, очень интересно. Хочу использовать transform. Подскажите, как сделать чтобы предыдущая картинка не подныривала под следующую. Спасибо. NMitra figure.vkl2:focus <
z-index: 100;
position: relative;
> Дмитрий Спасибо огромное. виталий нестёркин Здравствуйте долго искал как это воплотить благодаря вам сделал
Увеличить фотографию с помощью позиционирования но вот загвоздка картинка открывается вбок и поэтому у людей с неширокими мониторами будет не вся видна подскажите что написать в коде чтобы изменить а точнее сдвинуть к центру экрана
как сейчас это выглядит можно увидеть на сайте
http://xn--51-8kcfemaodkveyaqedoqejz1ao.xn--p1ai/ NMitra Здравствуйте,
Нижняя запись приоритетная, она перебивает значение left: 50%;
По хорошему нужно сделать так (я сразу этого не сделала, чтобы акцентировать ваше внимание на нужных свойствах)
Теория:
http://shpargalkablog.ru/2012/03/div-po-centru-html.html
http://shpargalkablog.ru/2012/03/vyrovnyat-tekst-vertikali.html
http://shpargalkablog.ru/2011/04/css-nalozhenie.html
http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html виталий нестёркин Спасибо большое за помощь шас пока некогда ближе к ночи попробую
разобратса виталий нестёркин Наталья здравствуйте пытался написать вам письмо на адрес n.mitra@yandex.ru.письмо не отравилась
Ошибка
Недопустимый адрес
Адрес n.mitra@yandex.ru. не существует или заблокирован. Письмо не было послано виталий нестёркин прошу прошения за мою невнимательность просто когда вставлял адрес
не заметил точку после ru все нормально с ящикам Юрий Наташа, больше всего понравился вариант с transform: scale. Но при быстром перемещении курсора с одной соседней картинки на другую из границы «цепляются»:
article img <
width: 100%;
height: 231px;
transition: 0.5s;
>
article img:hover <
transform: scale(1.5);
>
Видел в комментариях:
figure.vkl2:focus <
z-index: 100;
position: relative;
>
Но это не решает проблемы,т.к. в приоритете все равно будет какое-нибудь конкретное изображение. Может в таких случаях нужно задавать большее расстояние между img, чтобы они не «цепляли» друг друга? Или не указывать для изображений слишком большие размеры при наведении курсора? NMitra figure:hover, figure:focus <
z-index: 101;
> Юрий К сожалению, не помогло. Это моя вина, т.к. целиком не объяснил ситуацию. Дело в том, что изображения находятся внутри ячеек таблицы. Чтобы было более наглядно приведу код (в html все скобки удалил):
section
article
h2 Название статьи /h2
figure :first-child <
transform: translateX(-10px);
>
section > :last-child <
transform: translateX(10px);
>
figure img <
width: 100%;
height: 230px;
transition: 0.5s;
>
figure img:hover <
transform: scale(1.5);
position: relative;
z-index: 100;
>
Для крайних статей и всех изображений прописано transform. Может они конфликтуют? Хотя о возможности такого информации нигде не нашел.
NMitra Ничего не понимаю, нужна или ссылка на страницу или на пример на http://jsfiddle.net/ Юрий Половина кода все равно «улетела». Есть section, в которой три article. В каждом article размещено изображение. Далее:
section <
display: table;
width: 100%;
border-spacing: 10px;
>