Увеличение картинки при нажатии

#html #css #html5 #css3 #checkbox

Необходимо, чтобы при нажатии на картинку(уменьшенную версию) на экране по центру
появлялась её увеличенная версия. Проблема в том, что если картинок много и открывается
картинка внизу, то по закрытии картинки происходит переход вверх страницы. Как можно
это реализовать без перехода. Мне посоветовали использовать 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;
}

  
    
  
  
  
    
  
  
  
    
  
  
  
    
  
  
  
    
  
  
  
    
  
  
  
    
  
  
  
    
  
  
  
    
  
  
  
    
  
  




    

Ответы

Ответ 1

Если для вас принципиально использование CSS и структура разметки будет как в вашем
примере, то вместо псевдокласса :target на самом показывающемся блоке можно использовать
псевдокласс :focus на ссылке, по которой происходит клик, и делать видимой следующую
за ней ссылку, будет выглядеть так:

a:focus + .full {
  display: block;
}

Это устранит скроллирование вверх. Пример на JSFiddle

P.S. Но лучше, по-моему, для полноценных модальных окон использовать JS


Ответ 2

Вы можете воспользоваться готовыми решениями, например, библиотекой highslide.js.
Она имеет MIT-лицензию и написана на javascript без использования Jquery. 
Просто подключается:






где /graphics/ - путь до графических компонентов, поставляемых в дистрибутиве.

Используется таким образом:


  



Демо

Инструкция на русском языке.