Главная » Рецепты CSS » Как сделать простой эффект Lightbox на CSS3

Как сделать простой эффект Lightbox на CSS3

2016-12-31 / Вр:10:37 / просмотров: 5634

Вы наверняка видели такой эффект на сайтах, что когда вы клацаете мышкой на маленькую картинку, экран затемняется и выплывает эта же картинка только уже увеличенная. Эффект называется Lightbox.
Вот такой эффект мы с вами создадим, не используя JavaScript и JQuery, а только CSS3.

Сначала поставим код для картинки, которая будет миниатюрой. Её можно сделать маленьких размеров, например 200 px или же прописать ширину «width». Мне больше нравится с «width».

<a href="#image"><img src="img.png" width="200px" /></a>

Обратите внимание на ссылку «#image» – для добавления новых миниатюр эта ссылка должна быть уникальной, например, «#image1», «#image2», «#image3».

Теперь вставим картинку, которая будет выплывать. Название ссылки первой картинки «#image» обязательно должно совпадать с id второй картинки «image». Обязательно прописываем класс «pressbox»:

<a href="#" id="image" class="pressbox"><img src=" img.png "></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;
}

Вот полностью готовый код:

<html>
<head>
<title>Как сделать простой эффект Lightbox на CSS3 - BLOGGOOD.RU</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.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;
}
</style>
</head>
<body>
<a href="#image"><img src="img.png" width="200px" /></a>
<a href="#" id="image" class="pressbox"><img src="img.png"></a>

<a href="#image1"><img src="img1.png" width="200px" /></a>
<a href="#" id="image1" class="pressbox"><img src="img1.png"></a>

<a href="#image2"><img src="img2.png" width="200px" /></a>
<a href="#" id="image2" class="pressbox"><img src="img2.png"></a>
</body>
</html>

Хотите посмотреть результат?

[ДЕМОНСТРАЦИЯ]

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Популярные статьи:

Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330346
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274701
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222533
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187740
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186564

2 Ответов на комментарий - Как сделать простой эффект Lightbox на CSS3

Михаил

18.10.2017 в 22:24

День добрый.
Что необходимо сделать, чтобы после закрытия картинки, не возвращаться в начало страницы.

Степан => автор блога

20.10.2017 в 15:09

Здравствуйте, Михаил!
Попробуйте вот так:

<a href="#image"  onclick ="document.getElementsByClassName('pressbox')[0].style.display = 'block';"><img src="img.png" width="200px"  /></a>
<div id="image" class="pressbox" onclick ="document.getElementsByClassName('pressbox')[0].style.display = 'none';"><img src="img.png"></div> 
  
<a href="#image1" onclick="document.getElementsByClassName('pressbox')[1].style.display = 'block';"><img src="img1.png" width="200px" /></a>
<div id="image1" class="pressbox" onclick ="document.getElementsByClassName('pressbox')[1].style.display = 'none';"><img src="img1.png"></div>
 
<a href="#image2" onclick ="document.getElementsByClassName('pressbox')[2].style.display = 'block';"><img src="img2.png" width="200px" /></a>
<div id="image2" class="pressbox" onclick ="document.getElementsByClassName('pressbox')[2].style.display = 'none';"><img src="img2.png"></div>