Создаем галерею и увеличивающиеся картинки при клике

Создаем галерею и увеличивающиеся картинки при клике

Создаем галерею и увеличивающиеся картинки при клике-такой красивый эффект,увеличения картинки,придается лишь после того как кликните на картинку и в установке данный скрипт прост

Установка:HTML

Код
<div class="gallery">  
<a tabindex="1"><img src="http://uwebo4ka.3dn.ru/_si/0/93617874.jpg"></a>  
<a tabindex="2"><img src="http://uwebo4ka.3dn.ru/_si/0/38337946.jpg"></a>  
<a tabindex="3"><img src="http://uwebo4ka.3dn.ru/_si/0/58946248.jpg"></a>  
</div>


В CSS

Код
.gallery a img{  
  /* округления старт */  
  -webkit-border-radius: 25px;  
  -moz-border-radius: 25px;  
  border-radius: 25px;  
  /* округления конец */  
   
  /* transition старт */  
  -webkit-transition:All 1s ease;  
  -moz-transition:All 1s ease;  
  -o-transition:All 1s ease;  
  transition: all 1.0s ease;  
  /* transition конец */  
   
  /* Тень старт */  
  -webkit-box-shadow: 0px 2px 4px 1px #DFDFDF;  
  -moz-box-shadow: 0px 2px 4px 1px #DFDFDF;  
  box-shadow: 0px 2px 4px 1px #DFDFDF;  
  /* Тень конец */  
   
  /* Прозрачнсоть старт */  
  -moz-opacity: 0.70;  
  opacity: 0.70;  
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);  
  /* Прозрачнсоть конец */  
   
  margin-right:5px; /* Отступ справа */  
  padding:10px; /* Внутренние отступы */  
  display:inline-block; /* отображение */  
  height:150px; /* Высота */  
}  
.gallery a img:hover{  
  -moz-opacity: 1;  
  opacity: 1;  
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);  
}  
.gallery a:focus img{  
  position: relative; /* Позиционирование */  
  height:300px; /* Высота */  
  cursor: pointer; /* Вид курсора */  
   
  /* transition старт */  
  -webkit-transition:All 1s ease;  
  -moz-transition:All 1s ease;  
  -o-transition:All 1s ease;  
  transition: all 1.0s ease;  
  /* transition конец */  
   
  /* Тень старт */  
  -webkit-box-shadow: 0px 4px 4px 1px #DFDFDF;  
  -moz-box-shadow: 0px 4px 4px 1px #DFDFDF;  
  box-shadow: 0px 4px 4px 1px #DFDFDF;  
  /* Тень конец */  
}  
.gallery a{  
  outline:0; border:0;  
}
Создаем галерею и увеличивающиеся картинки при клике
Файлы для скачивания отсутствуют.
Поблагодарить автора Автор: Turbo
Комментарии (0)
Добавить комментарий
class="add-comm-form clearfix add-shadow2" id="add-comm-form">
avatar