CSS эффекты при наведении

Адаптивная, SEO подготовленная WordPress тема WordPress тема под вирусный контент и социальные сети

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

Эффекты CSS.

Итак, приступим. Все три эфеекта CSS в дефолтном варианте имеют круглые  обрамления вокруг изображений это достигается свойством: border-radius: 100px. Эффекты над изображениями могут иметь и не круглое обрамление, а к примеру квадратное. Для этого значение свойства border-radius во всем коде измените на 0px.

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

CSS3 эффекты при наведении

скачатьdemo

Разметка HTML.

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

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

<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>
<imgsrc="../images/daria-werbowy.jpg" />
<figcaption class="caption">Daria Werbowy</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; }

/* thumbnails 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; }

/* decoration 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; }

Теперь стилизуем наш первый 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;
}

Вот и все. Спасибо за внимание.

Мощный SEO плагин Clearfy
Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: