• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов » Размытие изображение при наведение клика (Создаем эффект размытия изображения при помощи CSS)
Размытие изображение при наведение клика
Kosten
Дата: Среда, 2019-04-03, 21:00 | Сообщение 1
Оффлайн
Администраторы
Сообщений:24679
Награды: 57


Этот материал посвящен оригинальному эффекту наведения для того, чтоб было размытия изображения, где используется чистый CSS. Сам трюк эффекта выглядит впечатляющий, так как по умолчанию картинка идет в расплывчатой теме.

Только стоит навести курсор, как появляется корректный рисунок и самого низу показывается название, что не мало важно для информации. Где эффект парения в основном используется для привлекательной веб-страницы, который не сложно реализовать на вашем сайте.



HTML

Код
<h2 id="bukesav">Эффект размытия</h2>
    <div class="detukop-nasdemun gasulopan">
        <div>
            <figure><img src="http://zornet.ru/_fr/79/4171022.jpg" /></figure>
            <span>Ваш заголовок</span>
        </div>
        <div>
            <figure><img src="http://zornet.ru/_fr/79/2352507.jpg" /></figure>
            <span>Ваш заголовок</span>
        </div>
        <div>
            <figure><img src="http://zornet.ru/_fr/79/9113763.jpg" /></figure>
            <span>Ваш заголовок</span>
        </div>
    </div>


CSS

Код
.gasulopan {
    margin: 15px 15px 0;
    padding: 0;
}
.gasulopan:last-child {
    padding-bottom: 60px;
}
.gasulopan::after {
    content: '';
    clear: both;
    display: block;
}
.gasulopan div {
    position: relative;
    float: left;
    width: 298px;
    height: 198px;
    margin: 0 0 0 18px;
    padding: 0;
    cursor: pointer;
  text-align: center;
}
.gasulopan div:first-child {
    margin-left: 0;
}
.gasulopan div span {
    position: absolute;
    bottom: -18px;
    left: 0;
    z-index: -1;
    display: block;
    width: 298px;
    margin: 0;
    padding: 0;
    color: #3c3939;
    font-size: 17px;
    text-decoration: none;
    text-align: center;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    opacity: 0;
}
figure {
    width: 298px;
    height: 198px;
    margin: 0;
    padding: 0;
    background: #fff;
    overflow: hidden;
}
figure:hover+span {
    bottom: -36px;
    opacity: 1;
}

/* Blur */
.detukop-nasdemun figure img {
    -webkit-filter: blur(3px);
    filter: blur(3px);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.detukop-nasdemun figure:hover img {
    -webkit-filter: blur(0);
    filter: blur(0);
}

На этом вся установка, где безусловно применяется в тех местах, где как можно больше преобладает изображение.

Также есть очень много способов размытие, и вот еще 2 варианта размытие картинки на CSS, которые вы можете сравнить с другими.

Демонстрация
Прикрепления: 3906986.jpg(26.4 Kb) · kastb.zip(2.0 Kb)
Страна: (RU)
Kosten
Дата: Четверг, 2019-04-04, 18:30 | Сообщение 2
Оффлайн
Администраторы
Сообщений:24679
Награды: 57


Также еще есть один вариант, где при наведение происходит эффект сглаживание, где по вверх идет название, и также можно разместить ключевые фразы.



HTML

Код
<ul class="vukopsadek_azopnvasok">
<li><a href="#"><img src="Ссылка на картинки"/><span class="name">Скрипты<span class="title">Создание сайта интернет ресурса</span></span></a></li>
<li><a href="#"><img src="Изображение"/><span class="name">Шаблоны <span class="title">Создание сайта интернет ресурса</span></span></a></li>
<li><a href="#"><img src="Ссылка на изображение"/><span class="name">Дизайн <span class="title">Создание сайта интернет ресурса</span></span></a></li>
</ul>


CSS

Код
.vukopsadek_azopnvasok {
margin: 0 auto;
text-align: center;
width: 100%;
padding: 20px;
}
.vukopsadek_azopnvasok li {
width: 421px;
min-height: 100%;
text-align: center;
height: 255px;
position: relative;
margin: 0 auto;
display: inline-block;
overflow: hidden;
background-color: black;
}
.vukopsadek_azopnvasok li:nth-child(2) img {
margin: 0;
display: inline-block;
float: right;
}
.vukopsadek_azopnvasok li .name {
text-decoration: none;
text-transform: uppercase;
text-shadow: rgba(0, 0, 0, 0.7) 1px 1px 5px;
color: white;
font-weight: lighter;
font-size: 20px;
letter-spacing: .1em;
position: absolute;
display: block;
top: 40%;
left: 0;
text-align: center;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
z-index: 2;
width: 100%;
height: 100%;
}
.vukopsadek_azopnvasok li .name .title {
display: block;
text-transform: none;
font-style: italic;
font-size: 80%;
color: rgba(255, 255, 255, 0.7);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-moz-transition-property: all;
-o-transition-property: all;
-webkit-transition-property: all;
transition-property: all;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
-moz-transition-duration: 0.9s;
-o-transition-duration: 0.9s;
-webkit-transition-duration: 0.9s;
transition-duration: 0.9s;
}
.vukopsadek_azopnvasok li:hover .name {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-moz-transition-property: all;
-o-transition-property: all;
-webkit-transition-property: all;
transition-property: all;
-moz-transition-duration: 0.6s;
-o-transition-duration: 0.6s;
-webkit-transition-duration: 0.6s;
transition-duration: 0.6s;
}
.vukopsadek_azopnvasok li:hover .title {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
}
.vukopsadek_azopnvasok li:hover img {
background-position: top top;
-webkit-filter: grayscale(0.4) blur(2px);
filter: grayscale(0.4) blur(2px);
-moz-transition-property: all;
-o-transition-property: all;
-webkit-transition-property: all;
transition-property: all;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.vukopsadek_azopnvasok li img {
display: block;
width: 421px;
margin: 0 auto;
display: inline-block;
text-align: center;
-moz-transition-property: all;
-o-transition-property: all;
-webkit-transition-property: all;
transition-property: all;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}

Демонстрация
Прикрепления: 2474436.jpg(39.8 Kb) · dsan.zip(2.6 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов » Размытие изображение при наведение клика (Создаем эффект размытия изображения при помощи CSS)
  • Страница 1 из 1
  • 1
Поиск: