[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Форум » Softing.do.am » Скрипты » При наведении курсора картинка увеличивается!
При наведении курсора картинка увеличивается!
  Добавил: Hoverik  
 
Для того чтоб картинка увеличивалась при наведении на неё мыши надо ;
1. В CSS шаблона вствить следующее
Code

* =Hoverbox Code      
----------------------------------------------------------------------*/      

.hoverbox      
{      
      cursor: default;      
      list-style: none;      
}      

.hoverbox a      
{      
      cursor: default;      
}      

.hoverbox a .preview      
{      
      display: none;      
}      

.hoverbox a:hover .preview      
{      
      display: block;      
      position: absolute;      
      top: -33px;      
      left: -45px;      
      z-index: 1;      
}      

.hoverbox img      
{      
      background: #fff;      
      border-color: #a6dcf5;      
      border-style: solid;      
      border-width: 1px;      
      color: inherit;      
      padding: 2px;      
      vertical-align: top;      
}      

.hoverbox li      
{      
      background: #eaf8fe;      
      color: inherit;      
      display: inline;      
      float: left;      
      margin: 3px;      
      padding: 5px;      
      position: relative;      
}      

.hoverbox .preview      
{      
      border-color: #a6dcf5;      
}

2. Сам код картинки должен выглядеть так
Code
<ul class="hoverbox">      
      <li>      
      <a href="#">      
      <img src="АДРЕСС КАРТИНКИ ПРЕВЬЮ" border="0" alt="ОПИСАНИЕ" />      
      <img class="preview" src="АДРЕСС ПОЛНОГО ИЗОБРАЖЕНИЯ" border="0" alt="ОПИСАНИЕ" />      
      </a>      
      </li>      
</ul>    
 
  Просмотров:  
Форум » Softing.do.am » Скрипты » При наведении курсора картинка увеличивается!
Страница 1 из 11
Поиск: