Простое масштабирование фона на CSS
 | |
| Это отличное решение на простой метод для создания увеличения фонового изображения с помощью CSS, где задействована широкая поддержка браузера. Такой тип эффекта особенно используется в различных ситуациях, как портфолио, это когда дизайн намеревается показать как визуальные, так и информационные элементы. Ведь не секрет, что почти все в своей основе современный веб-сайты задействуют красивую и оригинальную анимацию. Например, простой анимацией может быть любое увеличение изображение, где эффект производится при наведении курсора на саму картинку, которая может находится как фон или конкретном контейнере области просмотра. Но главным плюсом считаю, что нам не нужно подключать JS или JavaScript, так как на чистый CSS3 достаточно мощный, чтобы отлично справится с простым эффектом, и показать его корректно как в контейнере так и на фоне сайта. Безусловно есть много разных вариантов, чтоб исполнить фото эффект, здесь представлен самый простой и думаю один из популярных, который в основном переменятся веб разработчиками. Ведь он не сложный и сам трюк отлично выдает, где все оригинально смотрится. Как это устроено: Есть внешний fon, который устанавливает высоту и ширину изображение. Там должно быть установленное значение для либо height или width. А вот значение overflow скрывает элементы, которые появляются за пределами внешнего fon, где получается красивый эффект с увеличением. HTML Код <div class="shirina-fona"><div class="masukab-fona"></div></div> CSS Код .shirina-fona{ height: 100vh; overflow: hidden; } .masukab-fona{ height: 100%; width: 100%; background-size: cover; background-position: center; transition: all 0.5s ease; background-image: url('http://zornet.ru/ABVUN/Aba/detunis/zasan.jpg'); } .masukab-fona:hover{ transform: scale(1.2); } Внутреннее значение, где идет hover имеет transform, которое как раз станет увеличивается на 20%, как выставлено в стилистике CSS, где уже самостоятельно можете выставить свое значение. Рекомендую обратить внимание, что само изображение обязательно должно увеличиваться при наведении курсора внутри элемента контейнера, где не выходить и не вытекать из него при увеличении. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |