Сколько уже было сказано о привлекательности страниц на сайтах... И вот он, очередной опус, о том, как сделать изменение масштаба, увеличение картинки при наведении на нее мышкой.
Лично мне такая анимация очень нравится. Я сейчас говорю не о практичности и быстроте загрузки страницы, что является второй стороной медали, а именно о том, как это выглядит. При наведении на картинку она меняет свой масштаб, словно увеличивается? но до определенных размеров. При этом она может увеличиваться без каких-либо границ, то есть как бы в целом, так и в пределах уже заданного блока.
Разберу тот и другой вариант, с конкретными примерами и описанием ситуации.
Применяемые картинки, сейчас они без какого-либо эффекта
Увеличение изображения при наведении мышки CSS (без рамки)
Немного пояснений: Время трансформации занимает 1 секунду и задается, - transition: 1s; , а увеличение происходит при наведении с помощью - .scale:hover на величину 20 процентов - transform: scale(1.2);
Смотреть код
Увеличение изображения при наведении мышки CSS (в рамке)
Немного пояснений: Время трансформации занимает 1 секунду и задается, - transition: 1s; , а увеличение происходит при наведении с помощью - .scale:hover на величину 20 процентов - transform: scale(1.2); Плюсом использовано overflow то есть то, что должно отображаться за пределами блока. В нашем случае ничего, поэтому применяем атрибут hidden.
Может быть: isible Отображается все содержание элемента, даже за пределами установленной высоты и ширины. hidden Отображается только область внутри элемента, остальное будет скрыто. scroll Всегда добавляются полосы прокрутки. auto Полосы прокрутки добавляются только при необходимости. inherit Наследует значение родителя.
Кроме того, появились дополнительные блоки div именно в них происходит ограничение, то есть обрезка контуров картинки class scale
Смотреть код
Увеличение изображения при наведении мышки CSS с анимацией keyframes
Смотреть код
Увеличение изображения с анимацией CSS (keyframes)
Смотреть кодПо факту в двух последних примерах была применена анимация, то есть прикручена анимация (animation: slide 3s ease-in-out infinite;): было прописано имя анимации, время. количество повторений. При этом не важно к чему прикрутить анимацию к классу, картинке или условию, hover, (мышка наведена на картинку) и добавлено само правило для анимации @keyframes slide...