В уроке речь пойдет о простых, но необычных эффектах при наведении на миниатюры изображений реализованных с помощью только CSS3 - основой будут css3 transitions.
Не устаю напоминать, что результаты данного урока будут работать только в современных поддерживающих CSS3 браузерах, таких как Chrome, Firefox, Safari.
Идея урока состоит в том, чтобы создать необычную круглую миниатюру, которая будет анимироваться при наведении на неё курсора.
Разметка HTML
Рассмотрим разметку только для Демо 1, разметку других примеров можете сами посмотреть в исходных файлах, скачав архив.
Во-первых мы создадим заголовок для наших миниатюр с помощью HTML5 тега figure. Два DIV элемента будут добавлены к каждой миниатюры для декорирования.
Code
<div class="imgholder">
<div class="outer1 circle"></div>
<div class="outer2 circle"></div>
<figure>
<img src="../images/linnea-ahlman.jpg" />
<figcaption class="caption">Linnea Ahlman</figcaption>
</figure>
</div>
<div class="imgholder">
<div class="outer1 circle"></div>
<div class="outer2 circle"></div>
<figure>
<img src="../images/daria-werbowy.jpg" />
<figcaption class="caption">Daria Werbowy</figcaption>
</figure>
</div>
/* и другие миниатюры */
CSS
Определим некоторые основные CSS свойства и размеры миниатюр. Закруглить миниатюры мы можем с помощью свойства border-radius:
Code
.imgholder
{
position: relative;
width: 120px;
height: 120px;
border-radius: 100px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
/* thumbnails css | pcvector.net */
.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;
}
/* decoration css | pcvector.net */
.imgholder .circle
{
position: absolute;
width:120px;
height:120px;
border-radius: 100px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
Итак, тепер добавим необычный эффект при наведении курсора на миниатюру. Сделаем наши миниатюры полупрозрачными и отображать будем их только в момент наведения.
Code
.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 элемент декорирования. Будем использовать этот элемент для создания фона и границы для миниатюр:
Code
.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 элемент будет использоваться для создания внешней границы у миниатюры:
Code
.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;
}
