Поэтому я пытаюсь сделать изображение, и его фон исчезает, когда вы нажимаете его, используя селектор :target
. (Похожие на Лайтбокс: http://lokeshdhakar.com/projects/lightbox2/, но только css).
HTML:
<a href="#firstimg"><img src="img/thumb-3.jpg"></a>
<a href="#secondimg"><img src="img/thumb-4.jpg"></a>
<a href="#" class="lightbox" id="firstimg"><img src="img/image-3.jpg"></a>
<a href="#" class="lightbox" id="secondimg"><img src="img/image-4.jpg"></a>
CSS:
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
text-align: center;
background: rgba(38, 38, 38, 0);
transition: background 0.3s ease;
}
.lightbox img {
max-height: 90%;
max-width: 70%;
margin: 3%;
border-radius: 5px;
border: 5px solid #cbcbcb;
}
.lightbox:target {
display: block;
background: rgba(38, 38, 38, 0.7);
}
Только проблема: она не работает. Он пробовал это с другими элементами, и он работал нормально. Какие-либо предложения? Благодарю.
Ваш код работает каким-то образом, но не завершен. Я улучшил его на основе вашего кода и здесь работает перекрестный браузер и реагирует на DEMO. Все еще использует ваш :target
селектор.