Необходимо, чтобы при нажатии на картинку(уменьшенную версию) на экране по центру появлялась её увеличенная версия. Проблема в том, что если картинок много и открывается картинка внизу, то по закрытии картинки происходит переход вверх страницы. Как можно это реализовать без перехода. Мне посоветовали использовать checkbox, но я не особо понимаю, как через них делать.
.pictures {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
-webkit-column-gap: 1em;
-moz-column-gap: 1em;
column-gap: 1em;
margin-bottom: -1em;
}
a {
display: inline-block;
}
img {
display: block;
width: 100%;
margin-bottom: 1em;
}
.full {
display: none;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
padding: 8%;
background: #CCC center no-repeat;
background: rgba(0, 0, 0, 0.5) center no-repeat;
background-size: contain;
background-origin: content-box;
}
.full:target {
display: block;
}
Ответ
Если для вас принципиально использование CSS и структура разметки будет как в вашем примере, то вместо псевдокласса :target на самом показывающемся блоке можно использовать псевдокласс :focus на ссылке, по которой происходит клик, и делать видимой следующую за ней ссылку, будет выглядеть так:
a:focus + .full {
display: block;
}
Это устранит скроллирование вверх. Пример на JSFiddle
P.S. Но лучше, по-моему, для полноценных модальных окон использовать JS
Комментариев нет:
Отправить комментарий