Эффект увеличения фонового изображения при наведении курсора мыши на HTML и CSS. Плавное увеличение изображения при наведении на чистом CSS3 Css увеличить изображение

Всем привет! Долго искал простой способ плавно увеличить картинку при наведении на нее. Большинство способов описанных в интернете предлагают воспользоваться jQuery и т. п., что на мой взгляд немного излишне. Есть достаточно изящное решение с помощью CSS3 .

HTML

Для начало необходимо подготовить html разметку:

Подготавливаем изображения

Каждую картинку мы обернули в div который имеет класс zoom_img

CSS

Перейдем к стилям, для начала класс zoom_img:

Zoom_img { overflow:hidden; width:390px; height:244px; }

Размер блока должен быть равен размеру изображения, и необходимо добавить overflow:hidden; что бы ничего не выходило за размер блока, об этом чуть ниже.

Zoom_img img { -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; -webkit-transition: all 1s ease-out; } .zoom_img img:hover{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); }

С помощью параметра transition и transform в CSS3 происходит анимация. Время анимации 1 секунда. scale(1.1) – указывает что картинка должна увеличится в 1.1 раза, если необходимо увеличить в два раза, необходимо поставить 2.

И вот тут то необходимо вернуться к параметру overflow:hidden; в классе.zoom_img. За счет того что за рамки div’а ничего не выходит, создается эффект что картинка приближается, если overflow:hidden; убрать, будет видно что картинка увеличивается в размерах.

На этом на сегодня все.

Эффект увеличения изображения при наведении курсора мыши известен многим. Но как сделать так, чтобы увеличивалось только фоновое изображение (background-image) без увеличения основного содержимого блочного элемента?

Содадим блочный элемент с шириной 340 точек, а высотой 230 точек.

Для него укажем стиль:

Vozm {
width:340px;
height:230px;
float:left;
overflow: hidden;
}

Выравниваем по левому краю - float:left. Также указываем свойство overflow со значением hidden для того, чтобы фоновое изображение не выходило за область нашего блока.

На следующем этапе помещаем содержимое в наш блочный элемент:

Vozm p {
color:#da291c;
font-weight:bold;
font-size:16px;
line-height:21px;
}
.vozm .red_bl {
width:30px;
height:6px;
background-color:#da291c;
}

Указываем цвет текста для абзацев в блочном элементе - color со значением #da291c. Также указываем на то, что текст будет полужирный с размером (font-size) 16 пикселей и междустрочным интервалом (line-height) в 21 пиксель.

Стиль "red_bl" добавит красивый горизонтальный элемент красного цвета в наш блочный контейнер. Ширина 30 точек, высота 6 точек, цвет такой же как и у текста.

Также добавляем стиль для внутреннего блока:

Vposf {
position:relative;
z-index:9999;
left:45px;
top:40px;
}

Указываем относительное положение внутреннего блока с внутренними отступами слева 45 точек и сверху 40 точек.

Добавляем фоновое изображение background-image:

Стиль для него выглядит следующим образом:

Child {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}

Свойство transition для разных браузеров используется для того, чтобы эффект увеличения изображения фона при наведении происходил плавно в течении 50 миллисекунд. Ширину и высоту указываем равной 100%. Также позицию фона (background-position) ставим в центре и шасштабируем изображение (background-size) по ширине и высоте блока.

Vozm:hover .child,
.vozm:focus .child {
-ms-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}

Для этого используется свойством transform cсо значением scale. Увеличение производим на 20% от исходного.

Ну и подгружаем сам фон:

Bg-1 {background-image: url("/userf_fs/stati/fon_sh.jpg");margin-top: -59px;}

Так как блочный элемент с фоновым изображением находится ниже нашего текста, то его необходимо поднять. Для этого используем отрицательное значение для свойства margin-top.

Итак, html код выглядит следующим образом:

А css следующим образом:

Vozm {
width:340px;
height:230px;
float:left;
overflow: hidden;
}
.child {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.vozm:hover .child,
.vozm:focus .child {
-ms-transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.vozm p {
color:#da291c;
font-weight:bold;
font-size:16px;
line-height:21px;
}
.vozm .red_bl {
width:30px;
height:6px;
background-color:#da291c;
}
..jpg");margin-top: -59px;}
.vposf {
position:relative;
z-index:9999;
left:45px;
top:40px;
}

Если поместим несколько блочных элементов относительно друг друга, то получим следующее изображение.

Итак, мы достигли желаемого результата.

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

Предлагаю вам способ увеличения картинки на сайте без использования каких-либо скриптов, а исключительно с помощью html.

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

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

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

Очень простой, ну наипростейший способ, честное слово. Надо добавить следующий код к свойствам картинки:

Onmouseover="this.style.width="значение ширины большого изображения px"" onmouseout="this.style.width="значение ширины маленького изображения px""

При наведении курсора мыши картинка увеличивается.
Надеюсь, вы понимаете, что все это делается в текстовом редакторе.

2 способ – увеличение картинки на сайте при клике мыши

Способ аналогичный, просто onmouseover надо заменить onclick. К свойствам картинки добавляется следующий код:

Style="width: "значение ширины маленького изображения px; border:2px solid black;" onclick="this.style.width=значение ширины большого изображения px "" onmouseout="this.style.width="значение ширины маленького изображения px""

Полностью это будет выглядеть так

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

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

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

Читайте также:

2015-10-27T16:07:59+00:00 Надежда Скрипты и коды увеличение изображения на сайте,увеличение картинки на сайте

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

Надежда Трофимова [email protected] Administrator Блог сайт

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

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

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

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

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

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

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

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

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

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

Существует множество способов увеличения изображения на сайте. Мы рассмотрим несколько способов увеличения изображений без использования дополнительных скриптов, только с помощью 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 и . Используйте любой из них на своих сайтах и без дополнительных скриптов.