Эффект размытия фона изображения на CSS3
 | |
| Отличный эффект размытия фонового изображение, которое представлена в 6 вариантах, где при клике идет фон с появлением информации материала. Возможно вы уже встречали такой тип эффекта, что можно подключить к любому снимку на сайте. Но теперь есть выбор, так как они кардинально отличаются друг от друга, но если только начало идет идентичным. Но вот предоставление описание, здесь уже у каждого оригинальный. Свойство CSS3 позволяет применять общие эффекты фильтра к различным элементам, такие как размытие, оттенки серого, яркость, контрастность и многое другое. Есть с разворотом, также появление как сверху так и снизу, но выбор очень большой и безусловно можно подобрать, тот который по вашему мнению лучше подойдет по структуре. Возможно зададитесь вопросом, где можно поставить такой эффект. Как все знают, что каждой картинке должно быть свое писаное, хоть краткое, но обязано, не говоря о самом название, что здесь изначально в самом коде прописаны. Это можно видеть на вид материалов, как файлов или фотоальбома. Если говорит об официальных ресурсов, которые предлагают услуги, то это будет отличным решением. Так как изначально заказчик рассматривает снимок, и когда хочет перейти, то здесь срабатывает эффект и появляется краткое описание, что он сразу может ознакомится, где уже делает клике на переход. Так будет смотреться, где представлено после проверки на работоспособность.  Приступаем к установке: HTML Код <figure class="tenqarionsakim glamiatupdengam"> <img src="http://zornet.ru/ABVUN/sarunolas/2823460.jpg" alt="An awesome picture"> <figcaption> <h3>Скрипты для uCoz</h3> <p>Не секрет, что AMD в последние несколько лет изо всех сил пыталась конкурировать.</p> </figcaption> </figure> <figure class="tenqarionsakim semitransparent"> <img src="http://zornet.ru/ABVUN/sarunolas/6388328.jpg" alt="An awesome picture"> <figcaption> <h3>Шаблоны для uCoz</h3> <p>Стоит взглянуть на ситуацию чуть глубже, особенно с новыми консольными циклами на горизонте.</p> </figcaption> </figure> <figure class="tenqarionsakim blurrotate"> <img src="http://zornet.ru/ABVUN/sarunolas/6206933.jpg" alt="An awesome picture"> <figcaption> <h3>Раздел HTML и CSS</h3> <p>Матрицы - сглаживание, которое уже используется для следующего поколения 7-нм Vega от AMD.</p> </figcaption> </figure> <figure class="tenqarionsakim slideup"> <img src="http://zornet.ru/ABVUN/sarunolas/1888343.jpg" alt="An awesome picture"> <figcaption> <h3>Ajax окна для uCuz</h3> <p>Разные скрипты Ajax окна сайта uCoz предоставлены для вас в категорий.</p> </figcaption> </figure> <figure class="tenqarionsakim rotatex"> <img src="http://zornet.ru/ABVUN/sarunolas/5702667.jpg" alt="An awesome picture"> <figcaption> <h3>Меню для сайта</h3> <p>В Forbes Джейсон Эванджело собрал несколько недавних комментариев исполнителей, а также обзор выпусков.</p> </figcaption> </figure> <figure class="tenqarionsakim rotatey"> <img src="http://zornet.ru/ABVUN/sarunolas/7120173.jpg" alt="An awesome picture"> <figcaption> <h3>Сайт zornet.ru</h3> <p>Интересные решения вебмастеру для создания качественного сайта, что поможет в разработке дизайна.</p> </figcaption> </figure> CSS Код figure.tenqarionsakim{ margin: 0; padding: 0; display: inline-block; position: relative; overflow: hidden; } figure.tenqarionsakim img{ display: block; width: 249.8px; height: auto; transition: all 0.3s 0.3s; } figure.tenqarionsakim figcaption{ position: absolute; display: block; text-align: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; background: white; padding: 8px; z-index: 100; width: 87%; height: 87%; overflow: hidden; top: 6%; left: 6%; font-family: 'Josefin Sans', sans-serif; /* google font */ font-size: 15px; opacity: 0; -moz-transition: all 0.4s; -webkit-transition: all 0.4s; transition: all .4s; cursor:pointer; } figure.tenqarionsakim figcaption h3{ border-bottom: 1px solid red; text-align: left; width: 89.8%; margin: 0; } figure.tenqarionsakim figcaption p{ text-align: left; margin-top: 9px; line-height: 1.5; } figure.tenqarionsakim figcaption a{ text-decoration: none; } figure.tenqarionsakim:hover img{ -webkit-filter: blur(30px); /* blur filter */ filter: blur(30px); /* blur filter */ -webkit-transform: scale(1.3); transform: scale(1.3); -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; } figure.tenqarionsakim:hover figcaption{ opacity: 1; box-shadow: 0 0 3px gray; -moz-transition: all .3s .3s; -webkit-transition: all .3s .3s; transition: all .3s .3s; } figure.semitransparent figcaption{ background: transparent; } figure.semitransparent figcaption:before{ content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; background: white; opacity: .4; } /* Rotate figcation effect */ figure.blurrotate figcaption{ -webkit-transform: rotate(10deg); transform: rotate(10deg); } figure.blurrotate:hover figcaption{ -webkit-transform: rotate(0); transform: rotate(0); } figure.slideup figcaption{ -webkit-transform: translateY(100%); transform: translateY(100%); } figure.slideup:hover figcaption{ -webkit-transform: translateY(0); transform: translateY(0); } figure.rotatex figcaption{ -webkit-transform: rotateX(90deg); transform: rotateX(90deg); } figure.rotatex:hover figcaption{ -webkit-transform: rotateX(0); transform: rotateX(0); } figure.rotatey figcaption{ -webkit-transform: rotateY(90deg); transform: rotateY(90deg); } figure.rotatey:hover figcaption{ -webkit-transform: rotateY(0); transform: rotateY(0); } В предоставленной demo мы демонстрируем по реальному использованию одного из более многочисленных эффектов размытия на изображении, что находятся внутри элемента. Когда мышь перекатывается по фигуре, мы размываем содержащее картинки, используя преобразование CSS3, чтобы немного увеличить изображение, чтобы усилить эффект. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |