Использование CSS для размытия контента

CSS анимация может быть использована не только для создания затухающих или скользящих элементов, CSS3 анимация способна на многое другое.

Сегодня мы создадим эффектное анимированное изображение, которое вы сможете использовать в своих разработках!

Вот такой интересный эффект вы сможете вставить в ваш сайт за считанные минуты. Просто наведите курсор мыши на изображение...

HTML структура состоит из списка изображений с прозрачной подложкой, помещенных внутрь контейнера div

<div class="image">
    <img class="imac" src="/images/imac.png">
    <img class="macbook" src="/images/macbook.png">
    <img class="iphone" src="/images/iphone.png">
    <img class="ipad"  src="/images/ipad.png">
</div>

Вся анимация базируется на CSS эффектах размытия filter:blur.

При наведении на изображения курсора, включается анимация CSS, размывающая содержимое внутри элемента.

<style>
.image{
    position:relative;
}
.macbook, .ipad, .iphone, .imac{
    transition:0.4s;
    filter:blur(3px);
    position:absolute;
}
.imac:hover, .macbook:hover, .ipad:hover, .iphone:hover {
    filter:blur(0);
}
.imac{
    left: 340px;
    bottom: 0;
    z-index: 100;
}
.macbook{
    left: 40px;
    bottom: 0;
    z-index: 110;
}
.iphone{
    left: 830px;
    bottom: 0;
    z-index: 120;
}
.ipad{
    left: 930px;
    bottom: 0;
    z-index: 130;
}
</style>

Никаких JavaScript не нужно для создания этого эффекта - только несколько простых CSS директив. CSS3 это очень мощный инструмент для создания интересных визуальных эффектов достаточно простыми методами.

Остались вопросы? Или хотите получить что-то необычное?
Пишите нам на Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в браузере должен быть включен Javascript. и мы вам обязательно поможем.