Плавное увеличение изображения при наведении на чистом CSS3. Плавное увеличение изображения при наведении на CSS3 Увеличение изображения при наведении css3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2. Выводим его в нужном месте html кода нашего сайта

В файле стилей присваиваем ему следующие параметры:

Block{ width:150px; height:150px; background:#f30; display: block; opacity: 1; -webkit-transform: scale(1,1); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 550ms; -moz-transform: scale(1,1); -moz-transition-timing-function: ease-out; -moz-transition-duration: 550ms; } .block:hover { -webkit-transform: scale(1.2,1.2); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 550ms; -moz-transform: scale(1.2,1.2); -moz-transition-timing-function: ease-out; -moz-transition-duration: 550ms; }

Можно проверять готовый результат. Ширину, Высоту, фон и другие параметры задаем какие угодно, главное указать правильно параметры -transform - отвечающий за размер увеличения, причем просто в блоке его трогать не надо, он по умолчанию 1 - исходный размер, а вот при свойстве :hover мы его меняем на нужное, до какого размера будет увеличение, в данном случаи 1.2.
Конечно же Вы можете изменить наоборот, допустим если Вам нужно плавное уменьшение при наведении, тут никто не запретит Вам этого сделать.
Следующее свойство - это -transition , отвечающее за скорость анимации в миллисекундах. Если его не использовать, все будет резко увеличиваться и уменьшаться. В данном примере значение этого параметра - 550ms .

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

1. Как и в первом примере определяем блок с классом уже block2

2. Опять же выводим в нужном месте

И присваиваем ему стили:

Block2{ width: 150px; height: 150px; background:#390; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -ms-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease; } .block2:hover { width: 200px; height: 200px; }

В данном случаи, мы просто изменяем размер блока в пикселях и добавляем свойство -transition , которое делает плавным увеличение. В отличии от первого способа, мы указываем время анимации не в миллисекундах, а в секундах. На примере - это 2 секунды. Вот такими не хитрыми способами можно сделать плавное увеличение не прибегая к использованию скриптов. Можно обойтись чистым СSS.

Старые версии браузеров, могут не понять что от них хотят, поэтому смотрите сами. Лично я не обращаю внимания и не забиваю голову плохим с тем, что возможно, 1 из миллиона зайдет на мой сайт с древнего убогого Internet Explorer и у него что-то не отобразится. Для таких пользователей я вывожу сообщение, что им пора отказаться от мусора и перейти на нормальный, человеческий браузер.

На этом все, спасибо за внимание. 🙂

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

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

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

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

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

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

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