Главная » Cкрипты для uCoz » Эффект при наведении на картинку

Эффект при наведении на картинку

  


Интересный эффект при наведении на картинку для сайта, эффектах при наведении на миниатюры изображений реализованных с помощью только CSS3 - основой будут css3 transitions.
Мы создадим заголовок для наших миниатюр с помощью 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;  
  }
Эффект при наведении на картинку - Cкрипты для uCoz - Каталог файлов - Все для uCoz, DLE, Joomla, скрипты для uCoz

эффект, при, картинку, на, Украшения для uCoz, наведении
Категория: Cкрипты для uCoz Просмотров: 1320