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

Возможно Вас также заинтересует:

Убираем с главной страницы и RSS записи рубрики

Продолжаем улучшать функционал и внешний вид сайта. Убираем ненужные записи с главной страницы и RSS.

Хлебные крошки на сайте wordpress

Хлебные крошки на сайте - что это и как сделать?

Как сделать тень у текста за 5 минут

Здравствуйте, уважаемый читатель моего блога. В этой статье вы научитесь создавать за 5 минут с помощью стилей css и кода html тень текста.

Как сделать кнопку скачать с помощью кода css

Здравствуйте, уважаемый читатель моего блога. Продолжаю тему о кнопках. В этой статье пойдет речь о том как сделать кнопку скачать с помощью кода css.

Как сделать кнопки вверх вниз для сайта

Здравствуйте, дорогие читатели. Думала, я думала и решила написать статью как красиво увеличить фотографии при наведении на нее курсором мышки.

Радости моей не было предела, и не потому что интересная фишка, и не потому что детство в одном месте играет:) Хочу сказать, что такого эффекта я не ожидала.

Блогер я новенький, молодой, начинающий. Офисными программами пользоваться практически не умела, не говоря уже о фотошопе. Блог создала, а оказалось что учиться нужно было с самых низов. Чайник чайником. Все что я умела это сделать скриншот в программе Paint.

Смею заметить, что смотреть на мои скриншоты без слез было нельзя. Но неожиданно, когда экспериментировала и добавила гаджет в блог, мои фотографии заиграли, засияли, засверкали ярким цветом, они словно ожили и начали другую новую жизнь, в них добавилось контрастность.

Эффект плавного увеличения картинок будет у всех изображений в блоге. Картинки не увеличиваются на весь экран, а плавно выдвигаются и оживают. Настоящий 3Д эффект.

Как установить гаджет «Плавное увеличение картинки при наведении курсора» в Blogger

Код устанавливается как обычный гаджет HTML/ JavaScript в любом месте. Статью « » можно почитать в моем блоге.

Сейчас назрела потребность в красивом увеличении картинок по наведению. И никаких JS! Но пользователи старых браузеров ничего не увидят. Так им и надо.

В интернете ничего законченного не нашел, или используется position: absolute, или контент разъезжается, уступая место картинке, что не всегда приемлемо.

Итак, приступим. Все, что надо указать - задать класс картинке. Задавать будем, как всегда, отдельно для левых, отдельно для правых, и отдельно для центра. Это связано с особенностью увеличения картинки. Ведь, если картинка слева, при увеличении она должна сдвигаться вправо, иначе на мелких мониторах картинка уплывет за пределы браузера.

код HTML для картинки, выведенной слева (картинка увеличивается, подведите мышку к картинке):

И немного CSS, где указываем размер миниатюры, место расположения (слева), обтекание, а так же увеличение картинки при наведении:

img .img.left { float: left ; margin: 5px 15px 5px 0 ; max-height: 320px ; max-width: 320px ; } img .img.left :hover{ transform: scale (2 ) translate (70px , 30px ); transition: all 0 . 3s linear 0 . 3s ; }

И CSS отличается только расположением миниатюры (справа) и сдвигом влево при увеличении:

img .img.right { float: right ; margin: 5px 0 5px 15px ; max-height: 320px ; max-width: 320px ; } img .img.right :hover{ transform: scale (2 ) translate (-69px , 30px ); transition: all 0 . 3s linear 0 . 3s ; }

А теперь выведем миниатюру для центра:

img .img.center { margin: 5px auto ; display: block ; max-height: 320px ; max-width: 320px ; } img .img.center :hover { transform: scale (2 ); transition: all 0 . 3s linear 0 . 3s ; }

Обобщаем CSS и добавляем красоты:

img .img.left { float: left ; margin: 5px 15px 5px 0 ; } img .img.right { float: right ; margin: 5px 0 5px 15px ; } img .img.center { margin: 5px auto ; display: block ; } img .img { max-height: 320px ; max-width: 320px ; transition: all 0 . 3s linear 0s ; z-index: 1 ; border: 1px solid #EEE ; background: #FFFFFF ; padding: 5px ; } img .img :hover { cursor: pointer ; box-shadow: 0 0 5px 5px #eee ; border: 1px solid #25A0E3 ; z-index: 10 ; transition: all 0 . 3s linear 0 . 3s ; } img .img.left :hover{ transform: scale (2 ) translate (88px , 30px ); } img .img.right :hover{ transform: scale (2 ) translate (-88px , 30px ); } img .img.center :hover { transform: scale (2 ); }

Сделал задержку увеличения картинки на 0.3с. Что бы при перемещении мышки через картинку, она не увеличивалась.

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

Такие способы позволяют быстро посмотреть оригинал, так как нет дополнительной загрузки скриптов, однако если Вы хотите открывать оригиналы изображений с помощью скриптов с красивыми эффектами, или создать галерею, рекомендую обратить внимание на следующие статьи:

Лирическое отступление сделал, давайте приступать.

Увеличение изображения на сайте

Плюсом является то, что не нужно делать отдельно миниатюру к оригинальному изображению. Здесь задействовано только одно изображение

Увеличение изображения на сайте при наведении курсора

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

onmouseover="this.style.width="ширина оригинального изображения в px (или auto)"" onmouseout="this.style.width="ширина изображения в уменьшенном виде в px""

То есть при одном наведении курсора изображение станет большим.

Код полностью:

И последний самый красивый способ увеличения при наведении с использованием . Здесь мы добавим рамку и описание к большому изображению.
Код:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63

Описание изображения.

Описание изображения.

Увеличение изображения на сайте по клику

Способ увеличения изображения по клику похож на самый первый способ увеличения при наведении, только вместо onmouseover мы будем использовать onclick

Результат:

Как видите, здесь, чтобы увеличить изображение, нужно по нему кликнуть, а если убрать курсор, то оно уменьшится автоматически.

В следующем варианте увеличения изображения на сайте по клику мы будем использовать :

Здесь для того, чтобы уменьшенить изображение, то есть вернуть его в исходный размер, нужно будет кликнуть в любом месте веб-страницы.

Результат:

Еще один вариант с использованием — увеличение изображения по клику поверх текста. Здесь используем вот такой код:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

Мы рассмотрели несколько вариантов увеличения изображения на сайте : от простейших до чуть более сложных с использованием html и . Используйте любой из них на своих сайтах и без дополнительных скриптов.