Необычные эффекты при наведении на CSS3 Transitions

В этом уроке мы создадим несколько простых, но довольно необычных эффектов при наведении с помощью CSS transitions.

Сложность
css transition

Обратите внимание, что данный демонстрационный пример, будет работать только в браузерах, которые поддерживают CSS3 transitions, такие как Chrome, Safari и Firefox.

Идея

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

Основная разметка

Разработаем HTML разметку для первого примера, также можете посмотреть структуру для других демо в исходных файлах.

Во-первых, все изображения будут находится в элементах figure. Для каждой миниатюры, добавим по 2 контейнера в качестве оформления.

<div class="imgholder">
   <div class="outer1 circle"></div>
   <div class="outer2 circle"></div>
   <figure>
      <img src="/images/img1.jpg" />
      <figcaption class="caption">Image1</figcaption>
   </figure>
</div>
  
<div class="imgholder">
   <div class="outer1 circle"></div>
   <div class="outer2 circle"></div>
   <figure>
      <img src="/images/img2.jpg" />
      <figcaption class="caption">Image2</figcaption>
   </figure>
</div>
 
/*другие миниатюры*/

Основной CSS

Для начала определим основные CSS свойства и размеры миниатюр. Создадим круговую миниатюру с помощью свойства border-radius, пример данного свойства вы можете увидеть на сайте накрутка лайков вк.

.imgholder
{
   position: relative;
   width: 120px;
   height: 120px;
   border-radius: 100px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px; 
}
/* миниатюры css */
.imgholder img
{
   position: absolute;
   left: 0;
   top: 0;
   width: 120px;
   height: 120px;
   border-radius: 100px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   z-index: 5;
}
.imgholder figcaption
{
   position: absolute;
   left: 0;
   top: 120%;
   width: 120px;
   color: #004E87;
   text-shadow: -1px -1px 0 #fff;
   z-index: 4;
}
/* художественное оформление css */
.imgholder .circle
{
   position: absolute;
   width:120px;
   height:120px;
   border-radius: 100px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
}

Необычные эффекты при наведении

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

.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;
}

Перейдем к стилю контейнера. Установим фон и рамки.

.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;
}

Следующий контейнер будет использован в качестве внешней рамки.

.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;
}

ДЕМО СКАЧАТЬ Перевод статьи Fancy Hover Effects with CSS3 Transitions

 

Тэги: transition

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.