Галерею в блог

Фотографии при клике мышкой увеличиваются, при повторном клике возвращаются в исходное состояние. Для того, что бы пользователь понял как пользоваться галереей, имеется значок лупы с плюсом и минусом (увеличение и уменьшение).
Код:

<div id="gall">
<img border="3" src="ваша картинка 1" tabindex="0" />
<img border="3" src="ваша картинка 2" tabindex="0" />
<img border="3" src="ваша картинка 3" tabindex="0" />
<img border="3" src="ваша картинка 4 "tabindex="0" />
<div>
</div>
</div>
<style>
#gall {
  position: relative;
  padding-top: 50%;
  -moz-user-select: none; user-select: none;
}
#gall img {
  position: absolute;
  top: 25%;
  left: 12.5%;
  max-width: 24.5%;
  max-height: 49.5%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  cursor: zoom-in;
  transition: .2s;
}
#gall img:nth-child(4n-2) {left: 37.5%;}
#gall img:nth-child(4n-1) {left: 62.5%;}
#gall img:nth-child(4n) {left: 87.5%;}
#gall img:nth-child(n+5) {top: 75%;}

#gall img:focus {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
  outline: none;
  pointer-events: none;
}
#gall img:focus ~ div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  cursor: zoom-out;
}
</style>