html css галерея, сетка с программой просмотра всплывающих изображений - PullRequest
Новая
       5

html css галерея, сетка с программой просмотра всплывающих изображений

0 голосов
/ 10 мая 2018

Я попытался создать галерею изображений с изображениями разного размера, просмотрщиком всплывающих изображений и обычной сеткой. Кроме того, я мог бы загрузить изображение, просто нажав на него.К сожалению, я полностью запутался с кодом CSS.В чем ошибка, что я все еще не получаю нужную сетку в своей галерее?

мой код: 

#thumbwrap {
  margin: 75px auto;
  width: 252px;
  height: 252px;
}

.thumb {
  float: left;
  /* must be floated for same cross browser position of larger image */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 200px;
  align-items: center;
}

.thumb img {
  border: 1px solid #ccc;
  box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
  max-width: 100%;
}

.thumb:hover {
  border: 0;
  /* IE6 needs this to show large image */
  z-index: 1;
}

.thumb span {
  position: absolute;
  visibility: hidden;
}

.thumb:hover span {
  visibility: visible;
  top: 37px;
  left: 37px;
}
<div id="thumbwrap">
  <a class="thumb" download="" href="/path/to/image.jpg"><img alt="" height="auto" src="/path/to/image.jpg" width="200" /><span><img alt="" src="/path/to/image.jpg" /></span></a>
</div>
...