Увеличить при наведении css. Увеличение изображения, с помощью CSS. Плавное увеличение изображения при наведении курсора CSS

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

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

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

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

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

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

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

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

Эффект увеличения изображения при наведении курсора мыши известен многим. Но как сделать так, чтобы увеличивалось только фоновое изображение (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;
}

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

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

Этот приём с картинками я использую у себя на блоге. Когда пользователь наводит на миниатюру любой записи она плавно увеличивается. Согласитесь, довольно не плохо и красиво смотрится.

И делается это только с помощью CSS3, и довольно таки просто. Сейчас я Вам расскажу как это делать.

Как это работает Вы можете посмотреть в демо и у меня на блоге на главной странице.

Плавное увеличение картинки при наведении только на CSS3.

Html

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

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

CSS

А вот как выглядят стили:

Image { overflow:hidden; width: 380px; height:250px; }

Мы создали обычный блок размером 380 на 250 пикселей. Это блок должен быть такого же размера как и изображение (в нашем случае 380 на 250). Соответственно, если у Вас картинка будет большего или меньшего размера, размер блока.image делаем такого же размера как и картинка.

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

Теперь задаём правила для самих изображений:

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

Анимация происходит с помощью параметра в CSS3. На всю анимацию у нас уходит одна секунда. Если Вы хотите, чтобы картинка быстрее увеличивалась, уменьшите это значение.

В демо картинка увеличивается 1.1 раза. Если поставить значение 2, то картинка увеличится в два раза и так далее.

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