вРазные полезности

Эффект анимация при наведении на блоки для uCoz

 
Иногда попадаются ресурсы, где вы наводите на блог и изображением и оно меняется или появляется описание. И вот вам красивый Эффект анимация при наведении на блоки для uCoz который вы теперь можете поставить на свой ресурс. Он полностью работает на CSS3, что однозначно будет выгладить красиво. Сейчас я хочу вам предоставить один интересный и удобный скрипт блоков с анимацией при наведение на них с помощью CSS3. Данный скрипт хорошо будет смотреться и информировать ваших посетителей сайта на главной странице, с помощью его можно выводить разные категории вашего сайта.

Красивый эффект анимация при наведении на блоки для uCoz

Работает данный скрипт хорошо и не сильно грузит сайт. Так же замечу что установка данного скрипта лёгкая и справится с этой задачей любой новичок .

Установка скрипта: CSS3 анимация при наведении на блоки

Для начало установки скрипта вам нужно скачать архив (скачать можно в самом низу статьи) и загрузить папку images в файловый менеджер вашего сайта.

HTML код скрипта

Скопируйте код который расположен чуть ниже и вставьте в то место на сайте где вы его хотите видеть, но я бы посоветовал расположить его на главной странице сайта.

Код
<div class=»homeBox»>  

  <div class=»one_fourth»>  

  <div class = «boxImage»><img src = «/images/321.png»></div>  

  <h2>MOVIE CLIP</h2>  

  <div class = «boxDescription»>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet</div>  

  </div>  

  <div class=»one_fourth»>  

  <div class = «boxImage»><img src = «/images/131.png»></div>  

  <h2>LITTLE CHAT</h2>  

  <div class = «boxDescription»>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet</div>  

  </div>  

  <div class=»one_fourth»>  

  <div class = «boxImage»><img src = «/images/4821.png»></div>  

  <h2>SLIDESHOWS</h2>  

  <div class = «boxDescription»>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet</div>  

  </div>  

  <div class=»one_fourth last»>  

  <div class = «boxImage»><img src = «/images/62.png»></div>  

  <h2>NEW FEATURES</h2>  

  <div class = «boxDescription»>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet</div>  

  </div>  

  </div>

CSS3 стили скрипта

Теперь вставьте стили для наших блоков в самый низ ваших стилей сайта и сохраните.

Код
.homeBox   
  position: relative;  
  float: left;  
  display: block;  
  

.homeBox .one_fourth   
  text-align: center;  
  overflow: hidden;  
  background-image: linear-gradient(bottom, #F3F3F3 100%, #FAFAFA 0%);  
  background-image: -o-linear-gradient(bottom, #F3F3F3 100%, #FAFAFA 0%);  
  background-image: -moz-linear-gradient(bottom, #F3F3F3 100%, #FAFAFA 0%);  
  background-image: -webkit-linear-gradient(bottom, #F3F3F3 100%, #FAFAFA 0%);  
  background-image: -ms-linear-gradient(bottom, #F3F3F3 100%, #FAFAFA 0%);  
  background-image: -webkit-gradient( linear, left bottom, left top, color-stop(1, #F3F3F3), color-stop(0, #FAFAFA) );  
  border: 1px solid #E1E1E1;  
  -moz-box-shadow: 0px 1px 0px #ecebeb;  
  -webkit-box-shadow: 0px 1px 0px #ecebeb;  
  height: 228px;  
  width: 228px;  
  margin-right: 10px;  
   
  -webkit-transition: background 0.5s linear;  
  -moz-transition: background 0.5s linear;  
  -o-transition: background 0.5s linear;  
  transition: background 0.5s linear;  
  

.one_half, .one_third, .two_thirds, .one_fourth, .three_fourths, .one_fifth, .two_fifth, .three_fifths, .four_fifths   
  position: relative;  
  margin: 0;  
  margin-right: 3.8%;  
  float: left;  
  

.homeBox .one_fourth div, .homeBox .last div   
  padding: 10px;  
  

.homeBox .one_fourth:hover  
  background:#252525;  

  

.homeBox .one_fourth .boxImage   
  -webkit-transition: all 0.2s linear;  
  -moz-transition: all 0.2s linear;  
  -o-transition: all 0.2s linear;  
  transition: all 0.2s linear;  
  

.homeBox .one_fourth:hover .boxImage   
  position: relative;  
  -webkit-animation: moveFromTop 350ms ease;  
  -moz-animation: moveFromTop 350ms ease;  
  -ms-animation: moveFromTop 350ms ease;  
  

.homeBox .one_fourth h2   
  color: #4B4A4A;  
  margin: 0 0 10px 0;  
  -webkit-transition: all 0.2s linear;  
  -moz-transition: all 0.2s linear;  
  -o-transition: all 0.2s linear;  
  transition: all 0.2s linear;  
  

.homeBox .one_fourth:hover h2   
  position: relative;  
  color:#EAEAEA;  
  -webkit-animation: moveFromTop 200ms ease;  
  -moz-animation: moveFromTop 200ms ease;  
  -ms-animation: moveFromTop 200ms ease;  
  

.homeBox .one_fourth .boxDescription   
  color: #4B4A4A;  
  margin: 0 0 10px 0;  
  -webkit-transition: all 0.2s linear;  
  -moz-transition: all 0.2s linear;  
  -o-transition: all 0.2s linear;  
  transition: all 0.2s linear;  
  

.homeBox .one_fourth:hover .boxDescription   
  position: relative;  
  color:#EAEAEA;  
  -webkit-animation: moveFromBottom 500ms ease-in-out;  
  -moz-animation: moveFromBottom 500ms ease-in-out;  
  -ms-animation: moveFromBottom 500ms ease-in-out;  
  

@-webkit-keyframes moveFromTop   
  from   
  top: -600px;  
    
  to   
  top: auto;  
    

}  

@-moz-keyframes moveFromTop   

  from   
  -moz-transform: translateY(-600%);  
    
  to   
  -moz-transform: translateY(0%);  
    

}  

@-ms-keyframes moveFromTop   
  from   
  -ms-transform: translateY(-600%);  
    
  to   
  -ms-transform: translateY(0%);  
    
}  

@-webkit-keyframes moveFromBottom   
  from   
  bottom: -400px;  
    
  to   
  top: auto;  
    
}  

@-moz-keyframes moveFromBottom   
  from   
  -moz-transform: translateY(400%);  
    
  to   
  -moz-transform: translateY(0%);  
    
}  

@-ms-keyframes moveFromBottom   
  from   
  -ms-transform: translateY(400%);  
    
  to   
  -ms-transform: translateY(0%);  
    
}

Скрипт установлен и вы можете его настраивать и менять картинки под себя. Для замены картинок вам нужно проследовать в паку images и заменить существующие картинки на свои, но не забывайте что картинки должны иметь размер и название те же что и исходные изображение в обратном случае вам нужно будет подредактировать немного стили скрипта.