Главная » Файлы » Прочие скрипты » CSS

Умопомрачительный эффект при наведении на картинки на CSS3 для uCoz
24.06.14, 18:56:52



Я просто обалдел от этого эффекта и не мог не оформить материал на apo-ucoz, дабы поделиться с пользователями таким замечательным решением. Вы уже сами решайте, для чего Вам использовать такой эффект - для стилизации аватарок пользователей, для украшения галереи или для придания уникальности интернет-магазину. В любом случае этот потрясающий эффект произведёт удивительное впечатление на ваших пользователей

Для начала посмотрите ДЕМО

Моё тестирование в фидле: КЛИК

Установка:

В самый низ вашего css вставляйте:
Код
.imgholder {  
position:relative;  
width:120px;  
height:120px;  
border-radius:100px;  
float:left;  
margin:40px 30px;  
text-align: center  
  }  
  /* thumbnails style */  
.imgholder img {  
position:absolute;  
left:0;  
top:0;  
width:120px;  
height:120px;  
z-index:5;  
border-radius:100px;  
-moz-border-radius:100px;  
-webkit-border-radius:100px;  
opacity:0.3;  
filter: alpha(opacity=30);  
box-shadow:0 0 5px #000;  
-moz-box-shadow:0 0 5px #000;  
-webkit-box-shadow:0 0 5px #000;  
transform: scale(0.5, 0.5);  
-ms-transform: scale(0.5, 0.5);  
-moz-transform: scale(0.5, 0.5);  
-webkit-transform: scale(0.5, 0.5);  
transition: opacity 1s, transform 1s ease-in-out 0.3s;  
-moz-transition: opacity 1s, -moz-transform 1s ease-in-out 0.3s;  
-webkit-transition: opacity 1s, -webkit-transform 1s ease-in-out 0.3s;  
  }  
  .imgholder:hover img {  
opacity:1;  
filter: alpha(opacity=100);  
transform: scale(1, 1);  
-ms-transform: scale(1, 1);  
-moz-transform: scale(1, 1);  
-webkit-transform: scale(1, 1);  
  }  
  .imgholder figcaption {  
position:absolute;  
left:-5px;  
top:40%;  
width:130px;  
color:#004E87;  
font-weight:bold;  
text-shadow:-1px -1px 0 #fff;  
z-index:4;  
transition: top 0.5s ease-out;  
-moz-transition: top 0.5s ease-out;  
-webkit-transition: top 0.5s ease-out;  
  }  
  .imgholder:hover figcaption {  
top:120%;  
  }  
  /* decorations style */  
.imgholder .circle {  
position:absolute;  
border-radius:100px;  
-moz-border-radius:100px;  
-webkit-border-radius:100px;  
  }  
  .imgholder .outer1 {  
top:-8px;  
left:-8px;  
width:120px;  
height:120px;  
z-index:2;  
border:8px solid;  
border-color:#DEEBFC;  
box-shadow:0 0 3px #AFD3FF;  
-moz-ox-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);  
transform:rotate(90deg);  
-ms-transform:rotate(90deg);  
-moz-transform:rotate(90deg);  
-webkit-transform:rotate(90deg);  
transition: transform 1.8s ease-in-out, box-shadow 1s ease-out, border-color 1.5s;  
-moz-transition: -moz-transform 1.8s ease-in-out, -moz-box-shadow 1s ease-out, border-color 1.5s;  
-webkit-transition: -webkit-transform 1.8s ease-in-out, -webkit-box-shadow 1s ease-out, border-color 1.5s;  
  }  
  .imgholder:hover .outer1 {  
border-color:#0088EA #7FC9FF #0088EA #7FC9FF;  
box-shadow:0 0 10px #0285E2;  
-moz-box-shadow:0 0 10px #0285E2;  
-webkit-box-shadow:0 0 10px #0285E2;  
transform:rotate(-10deg);  
-ms-transform:rotate(-10deg);  
-moz-transform:rotate(-10deg);  
-webkit-transform:rotate(-10deg);  
  }  
  .imgholder .outer2 {  
top:-18px;  
left:-18px;  
width:136px;  
height:136px;  
z-index:1;  
border:10px solid;  
border-color: #D6E5FC #9BC8FF #D6E5FC #9BC8FF;  
box-shadow:0 0 20px #8EB9FF;  
-moz-box-shadow:0 0 20px #8EB9FF;  
-webkit-box-shadow:0 0 20px #8EB9FF;  
opacity:0;  
filter: alpha(opacity=0);  
transform: scale(1.3, 1.3) rotate(180deg);  
-ms-transform: scale(1.3, 1.3) rotate(180deg);  
-moz-transform: scale(1.3, 1.3) rotate(180deg);  
-webkit-transform: scale(1.3, 1.3) rotate(180deg);  
transition: opacity 0.5s, transform 0.7s ease-out;  
-moz-transition: opacity 0.5s, -moz-transform 0.7s ease-out;  
-webkit-transition: opacity 0.5s, -webkit-transform 0.7s ease-out;  
  }  
  .imgholder:hover .outer2 {  
opacity:0.9;  
filter: alpha(opacity=90);  
transform: scale(1, 1) rotate(-10deg);  
-ms-transform: scale(1, 1) rotate(-10deg);  
-moz-transform: scale(1, 1) rotate(-10deg);  
-webkit-transform: scale(1, 1) rotate(-10deg);  
  }


Картинки с эффектом оформляются следующим образом:
Код
<div class="imgholder">  
<div class="outer1 circle"></div>  
<div class="outer2 circle"></div>  
<figure>  
<img src="Ссылка на картинку" />  
<figcaption class="caption">Заголовок картинки</figcaption>  
</figure>  
  </div>


За основу была взята ЭТА статья

Материал подготовлен Apocalypse

Категория: CSS | Добавил: Apocalypse | Теги: эффект, при, ucoz, на, наведении, CSS3, картинки, умопомрачительный, для
Просмотров: 506 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: