phpjsJqueryhtmlcssblog

увеличить при наведении css

"увеличить при наведении css" - сделаем так, чтобы при наведении на объект... он увеличивался на определенное количество процентов.

Это может быть : картинка, текст, кнопка - всё что угодно!

Увеличиваем при наведении:

1. Разбираем с примером - как увеличить при наведении.
2. Разбираем с примером - как увеличить при наведении медленно.

Скопировать ссылку



Разбираем с примером - как увеличить при наведении.

Для того, чтобы увеличить при наведении с помощью css вам понадобится:

Для примера возьмем картинку:



Добавим этому объекту - класс - с произвольным значением - "example".

Напишем стили и "увеличим при наведении" - первое, ну, чтобы увидеть края объекта добавим border.

Вам ещё нужно псевдокласс hover.

На него повесим "transform" с... ну пусть увеличение будет 1.3:

img.example:hover{

-webkit-transform: scale(1.3);

-moz-transform: scale(1.3);

-o-transform: scale(1.3);

}

Соберем весь код "увеличить при наведении.".

Html:

<img src="https://dwweb.ru/__img/__dates/logo.png" alt="replace" title="replace" class="example">

Css:

<style>

img.example:hover{

-webkit-transform: scale(1.3);

-moz-transform: scale(1.3);

-o-transform: scale(1.3);

}

img.example {

border: 1px solid;

}

</style>

Выведем пример кода "увеличить при наведении.".

Разместим выше приведенный код "увеличить при наведении." прямо здесь...


Не совсем то, что нам нужно... слишком дергается и увеличивается слишком быстро!


Скопировать ссылку



Разбираем с примером - как увеличить при наведении медленно.

Сверху я показал пример - "увеличить при наведении.", но получилось не очень красиво, потому, что увеличение происходит слишком быстро!

Поэтому! Давайте уменьшим скорость увеличения при наведении!


Для этого вам понадобится:

Весь код возьмем из первого пункта!

И добавим туда "transition" со значением "0.5s":


transition: 0.5s;

Соберем весь код:

Соберем весь код "увеличить при наведении медленно.".

Html:

<img src="https://dwweb.ru/__img/__dates/logo.png" alt="replace" title="replace" class="example">

Css:

<style>

img.example:hover{

-webkit-transform: scale(1.3);

-moz-transform: scale(1.3);

-o-transform: scale(1.3);

}

img.example {

border: 1px solid;

transition: 0.5s;

}

</style>

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

Поступаем аналогично... размещаем код "увеличения при наведении медленно" прямо здесь:


Нужно ещё медленне увеличивать при навдении:

Если это все равно слишком быстро, то увеличиваем число в "transition" - давайте поставим "2 секунды"

transition: 2s;

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---