Background Image

Крутой эффект при наведении на фото

Script

by — Category Script on

В уроке речь пойдет о простых, но необычных эффектах при наведении на миниатюры изображений реализованных с помощью только CSS3 - основой будут css3 transitions. Результаты данного урока будут работать только в современных поддерживающих CSS3 браузерах, таких как Chrome, Firefox, Safari

Идея урока состоит в том, чтобы создать необычную миниатюру, которая будет анимироваться при наведении на неё курсора.

Разметка HTML

Во-первых мы создадим заголовок для наших миниатюр с помощью HTML5 тега figure. Два DIV элемента будут добавлены к каждой миниатюры для декорирования.

    <div class="imgholder">
        <div class="outer1 circle"></div>
        <div class="outer2 circle"></div>
        <figure>
            <img src="http://madeas.ru/avatar/10/535015.jpg" />
            <figcaption class="caption">Кирилл Сафронов</figcaption>
        </figure>
    </div>

    /* и другие миниатюры */

CSS

Закруглить миниатюры мы можем с помощью свойства border-radius:

   border-radius: 100px;
   -moz-border-radius: 100px;
   -webkit-border-radius: 100px;

Определим некоторые основные CSS свойства и размеры миниатюр. 

.imgholder
{
   position: relative;
   width: 120px;
   height: 120px;
}
.imgholder img
{
   position: absolute;
   left: 0;
   top: 0;
   width: 105px;
   height: 105px;
   z-index: 5;
}
.imgholder figcaption
{
   position: absolute;
   left: 0;
   top: 120%;
   width: 120px;
   color: #004E87;
   text-shadow: -1px -1px 0 #fff;
   z-index: 4;
}
.imgholder .circle
{
   position: absolute;
   width:120px;
   height:120px;
}

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

.imgholder img
{
   opacity: 0.5;
   transition:
      opacity 0.7s ease-out 0.3s;
   -moz-transition:
      opacity 0.7s ease-out 0.3s;
   -webkit-transition:
      opacity 0.7s ease-out 0.3s;
}
.imgholder:hover img
{
   opacity: 1;
}


Теперь стилизуем наш первый DIV элемент декорирования. Будем использовать этот элемент для создания фона и границы для миниатюр:

.imgholder .outer1
{
   top: -8px;
   left: -8px;
   z-index: 2;
   border: 8px solid;
   border-color: #DEEBFC;
   box-shadow: 0 0 3px #AFD3FF;
   -moz-box-shadow: 0 0 3px #AFD3FF;
   -webkit-box-shadow: 0 0 3px #AFD3FF;
   background: #ffffff;
   background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e2efff 100%);
   background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e2efff));
   background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
   background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
   background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
   background: radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2efff',GradientType=1 );
   transition:
      box-shadow 1s ease-out,
      border-color 1s;
   -moz-transition:
      -moz-box-shadow 1s ease-out,
      border-color 1s;
   -webkit-transition:
      -webkit-box-shadow 1s ease-out,
      border-color 1s;
}
.imgholder:hover .outer1
{
   border-color: #0088EA;
   box-shadow: 0 0 10px #0285E2;
   -moz-box-shadow: 0 0 10px #0285E2;
   -webkit-box-shadow: 0 0 10px #0285E2;
}

Следующий DIV элемент будет использоваться для создания внешней границы у миниатюры:

.imgholder .outer2
{
   top: -18px;
   left: -18px;
   width: 136px;
   height: 136px;
   z-index: 1;
   border: 10px solid;
   border-color: #9BC8FF;
   box-shadow: 0 0 3px #8EB9FF;
   -moz-box-shadow: 0 0 3px #8EB9FF;
   -webkit-box-shadow: 0 0 3px #8EB9FF;
   opacity: 0;
   transition:
      opacity 0.7s ease-out 0.3s,
      box-shadow 0.7s ease-out 0.3s;
   -moz-transition:
      opacity 0.7s ease-out 0.3s,
      -moz-box-shadow 0.7s ease-out 0.3s;
   -webkit-transition:
      opacity 0.7s ease-out 0.3s,
      -webkit-box-shadow 0.7s ease-out 0.3s;
}
.imgholder:hover .outer2
{
   opacity: 1;
   box-shadow: 0 0 20px #8EB9FF;
   -moz-box-shadow: 0 0 20px #8EB9FF;
   -webkit-box-shadow: 0 0 20px #8EB9FF;
}

Готово! 


View demo
Понравился материал?
Поделитесь с друзьями

С этим материалом смотрят:
    Таблица изображений с ховер эффектом следования

    Таблица изображений с ховер эф...

     Идея заключается в том, чтобы заставить информ...

    View More
    0 378 15:58
    Эффект "живого фото" на CSS3

    Эффект "живого фото"...

    "Живые" фото стали достаточно популярны в ...

    View More
    0 373 17:48
    Как придать изображению 3d эффект?

    Как придать изображению 3d эфф...

    Небольшой код, который может пригодится в портфолио ...

    View More
    0 444 11:48
    Эффект пульсации или мерцания на CSS3

    Эффект пульсации или мерцания ...

    Данный скрипт очень подойдёт для реалистичности эффе...

    View More
    0 1054 13:49
Метки: ЭФФЕКТ, effect, Hover
Feedback: 1
iMadeas
0
Интересно смотрится. Спасибо

Leave a Comment

Имя *:
Email *:
Код *:
Menu