BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

Вы наверняка видели такой эффект на сайтах, что когда вы клацаете мышкой на маленькую картинку, экран затемняется и выплывает эта же картинка только уже увеличенная. Эффект называется 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>

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

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

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

Получай обновления блога!!! Подпишись:

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

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

  1. Михаил

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

    Ответить

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

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

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

    <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> 
    

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: , , ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 781
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4278