Сегодня мы научимся создавать простой лайтбокс ( Lightbox ) с функцией переключения. Этот лайтбокс содержит только маленькую миниатюру изображения, после щелчка она увеличится до большого или исходного размера, также при повторном нажатии она снова будет маленького размера. Это своего рода переключение, но это очень простой метод, основанный на цели ссылки.
По сути, Lightbox - это библиотека JavaScript, которая отображает изображения и видео, заполняя экран и затемняя остальную часть веб-страницы. Но используя только HTML и CSS, мы также можем создать такой же эффект для расширения изображения.
Как вы заметили, здесь мы использовали только HTML и CSS, вы можете назвать это чистым примером лайтбокса CSS. Я думаю, что этот пост будет вам полезен, если вы новичок, то вам наверняка понравится этот трюк для создания переключателя. Вы также можете использовать его на своем сайте или проекте.
Код и остальная информация тут - источник