your beautiful barber
1
team
top
masters
2
Hover-эффекты для картинок
Создадим ZeroBlock, и добавим в него нашу картинку, затем добавим на страницу блок Т123 и добавим в него код, заменив класс элемента картинки.
Видеоинструкция
Код 1: эффект Blur
<!--Заменяем класс элемента картинки на свой -->

<style>
  .t396 .tn-elem__1374930191572103298057  
{
-webkit-filter: blur(3px);
  filter: blur(3px);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
      }
  .t396 .tn-elem__1374930191572103298057:hover { 
-webkit-filter: blur(0);
  filter: blur(0);
}
</style>
Код 2: эффект Blur + Gray Scale
<!--Заменяем класс элемента картинки на свой -->

<style>             
  .t396 .tn-elem__1374930191572103298057 {    
-webkit-filter: grayscale(0) blur(0);
  filter: grayscale(0) blur(0);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}


  .t396 .tn-elem__1374930191572103298057:hover {
-webkit-filter: grayscale(100%) blur(3px);
  filter: grayscale(100%) blur(3px);
}
</style>
Код 3: эффект Rotate по Y
<!--Заменяем класс элемента картинки на свой -->

<style>
  .t396 .tn-elem__1374930191572103298057 {    
transition:all 1.2s ease-in-out;
-webkit-transition:all 1.2s ease-in-out;
-moz-transition:all 1.2s ease-in-out;
-ms-transition:all 1.2s ease-in-out;
-o-transition:all 1.2s ease-in-out;
}
  .t396 .tn-elem__1374930191572103298057:hover 
  {
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
}
</style>