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

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

Добиться такого результата можно прописав стили для картинки в файле 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;
 }

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

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