[ Обновленные темы · Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » О uCoz » Скрипты » Необычайно красивые эффекты при наведении на чистом CSS3
Необычайно красивые эффекты при наведении на чистом CSS3
Дата: Понедельник, 09.12.2013, 19:37:12 | Сообщение # 1
Группа: Проверенные Титул: Технарь Сообщений: 283
Награды: 1
Репутация: 3
Статус:
Сайт пользователя:
Skype пользователя:

Красивейший эффект при наведении, в нашем случае на картинку написанный на чистом CSS3

Смотрим мой тест на Фиддле

И так, в 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>


За основу была взята эта статья

Материал подготовил: Andrey
Прикрепления: 2150080.png(269.7 Kb)
Форум » О uCoz » Скрипты » Необычайно красивые эффекты при наведении на чистом CSS3
  • Страница 1 из 1
  • 1
Поиск: