Главная » Файлы » Прочие скрипты » CSS
Простой Lightbox эффект увеличения картинок на CSS3 для вашего сайта
15.07.14, 00:52:44



Очень простое, интересное решение на CSS3, которое позволит создать эффект увеличения изображения, который можно наблюдать в Lightbox галерее на jQuery

Для начала посмотрите ДЕМО

Моё тестирование в фидле: КЛИК

Установка:

Ваши картинки оформляйте следующим образом:
Код
<a href="#image1">
  <img src="Ссылка на миниатюру" width="200px" />
</a>
<a href="#" id="image1" class="pressbox">
  <img src="Ссылка на большое изображение" />
</a>

<a href="#image2">
  <img src="Ссылка на миниатюру" width="200px" />
</a>
<a href="#" id="image2" class="pressbox">
  <img src="Ссылка на большое изображение" />
</a>

<a href="#image3">
  <img src="Ссылка на миниатюру" width="200px" />
</a>
<a href="#" id="image3" class="pressbox">
  <img src="Ссылка на большое изображение" />
</a>


В самый низ вашего css вставляйте:
Код
.pressbox {
  width: 0;
  height: 0;
  position: fixed;
  overflow: hidden;
  left: 0;
  top: 0;
  z-index: 9999;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
}
.pressbox img {
  opacity: 0;
  padding: 10px;
  background: #ffffff;
  margin-top: 100px;
  -webkit-box-shadow: 0px 0px 15px #444;
  -moz-box-shadow: 0px 0px 15px #444;
  box-shadow: 0px 0px 15px #444;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
  transition: opacity .25s ease-in-out;
}
.pressbox:target {
  width: auto;
  height: auto;
  bottom: 0;
  right: 0;
}
.pressbox:target img {
  opacity: 1;
}


Источник: КЛИК

Материал подготовлен Apocalypse
Категория: CSS | Добавил: Apocalypse | Теги: эффект, картинок, Lightbox, увеличения, на, Вашего, CSS3, простой, для, сайта
Просмотров: 650 | Загрузок: 0 | Рейтинг: 1.0/1
Всего комментариев: 0
Имя *:
Email: