Меню Рубрики
  • Поздравляем!

    Поздравляем!

    С праздником Днем Защитника Отечества!

  • Проверьте наличие штрафов!

    Проверьте наличие штрафов!

    Официальный сервис по поиску и оплате штрафов ГИБДД! Оплачивайте штрафы вовремя!

  • Дешевые авиабилеты

    Дешевые авиабилеты

    Официальный сервис по поиску, бронированию и покупке дешевых авиабилетов!

Плавное увеличение картинки при наведении курсора

Давайте рассмотрим такую тему. Хотелось бы, чтобы происходило плавное увеличение картинки при наведении курсора. Пример проделанной работы можно посмотреть в статье «Иконки для сайта«. Либо наведите курсор мыши на картинку ниже, и вы увидите, как она плавно увеличивается, после перемещения курсора, картинка плавно возвращается в исходное положение.

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

Добиться такого результата можно прописав стили для картинки в файле style.css.

Но давайте начнем с самого начала.

1. Присвоим класс для картинки.

Перейдите в админку WordPress, создайте новую запись и добавьте картинку, которую будет необходимо увеличивать!

Увеличение картинки при наведении курсораПосле того, как добавите картинку, перейдите в режим «Текст»

Увеличение картинки при наведении курсораПеред началом кода необходимо добавить строчку

<p class="thumb">

Вместо thumb, можете присвоить любое название.

Теперь в самом конце кода, добавьте

</p>

Должно получиться в таком виде!

Увеличение картинки при наведении курсораВсе! теперь мы присвоили класс для нашей картинки, с названием «thumb»

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

Что потребуется, для того чтобы происходило увеличение при наведении css?

2. Прописать в файле style.css стили для класса.

Заходим на хостинг вашего сайта, в файловый менеджер, и находим файл Style.css. В самый конец документа, необходимо вставить строчки

.thumb:hover {
  transform:scale(1.10);
  transition: 1s;
 }

.thumb — ваш класс

transform:scale (1.10) — увеличение картинки.

(1.10) — на сколько увеличивается картинка

transition: 1s — скорость увеличения

Увеличение будет происходить плавно, течение 1 секунды. Увеличив свойство transition, вы уменьшите скорость увеличения картинки.

Добавив данный код

.thumb {transform:scale(1);
  transition: 1s;
 }

Картинка плавно уменьшится, после перемещения курсора.

Если возникнут какие-либо вопросы, можете написать в комментариях.

 

 

 

 

[Всего голосов: 3    Средний: 3.7/5]

Комментарии:

8 комментариев на «“Плавное увеличение картинки при наведении курсора”»

  1. Тоже не понял ? Что за стили-где этот стили-в какой папке системы ? Как прописать в style.Как добавить код ? Извините можно по-подробней-будем благодарны !!! Всего доброго !!!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2017 Онлайн журнал - Blognovichok.ru· Авторские права защищены.
Все материалы опубликованные на сайте являются объектами авторского права. Использование материалов разрешается только с активной ссылкой на blognovichok.ru