<a class="avelaboksan" href="#dog">
<img src="http://zornet.ru/_fr/56/8076855.jpg"/>
</a>
<div class="augme-navonlas" id="dog">
<img src="http://zornet.ru/_fr/56/8076855.jpg"/>
<a class="edunobs-kucontes" href="#"></a>
</div>

a.avelaboksan img {
  height: 148px;
  border: 3px solid #eaeaea;
  box-shadow: 0px 0px 8px rgb(0 0 0 / 49%);
  margin: 126px 14px 14px 14px;
}
/* убирает его из поля зрения и добавляет плавный переход */
.augme-navonlas {
position: fixed;
top: -100%;
width: 100%;
background: rgb(27 25 25 / 70%);
width: 100%;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
}
/* Стилизует изображение авелабоксана, центрирует его по вертикали и горизонтали, добавляет переход увеличения и делает его адаптивным, используя комбинацию полей и абсолютного позиционирования */
.augme-navonlas img {
margin: auto;
position: absolute;
top: 0;
left:0;
right:0;
bottom: 0;
max-height: 0%;
max-width: 0%;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
box-sizing: border-box;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
/* Стилизует ссылку закрытия, добавляет слайд вниз */
a.edunobs-kucontes {
  display: block;
  width: 48px;
  height: 48px;
  box-sizing: border-box;
  background: #f3f0f0;
  color: #151515;
  text-decoration: none;
  position: absolute;
  top: -80px;
  right: 0;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}
/* Предоставляет часть символа "X" для исключения изображения из ссылки закрытия. */
a.edunobs-kucontes:before {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
/* часть символа "X" для исключения изображения из ссылки закрытия. */
a.edunobs-kucontes:after {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
/* Uses the :целевой псевдокласс для выполнения анимации при нажатии якоря .augme-navonlas */
.augme-navonlas:target {
opacity: 1;
top: 0;
bottom: 0;
}
.augme-navonlas:target img {
max-height: 100%;
max-width: 100%;
}
.augme-navonlas:target a.edunobs-kucontes {
top: 0px;
}