缩略图悬停图像css

Question

我想有一个如本网站所示的图库：https://www.notjustalabel.com/designer/kindall-almond

我是初学者，这是我的起点：

CSS

.collection {
    width:300px;
    height:300px;
    margin:1em auto;
  padding-left:310px;
    text-align:center;
    list-style:none;
    position:relative;
  background:#eee;
  min-width: 40em;
}
.thumb {
  float:left;
    width:90px;
  margin:10px 10px 10px 0;
    height:80px;
}
li div {
    left:0;
    top:0;
    position:absolute;
    width:300px;
    height:300px;
    line-height:300px;
    font-size:2em;
    opacity:0;
    transition:0.4s;
}
li:nth-child(1) {
  width:0;
  margin: 0;
}
li:nth-child(1) div {opacity:1;}
li:nth-child(odd) div { background:orange;}
li:nth-child(even) div { background:pink;}
li span {
    display:block;
    cursor:pointer;
    width:100%;
    height:100%;
    line-height:80px;
    opacity:0.5;
    -webkit-transition:0.4s;
    -moz-transition:0.4s;
    transition:0.4s;

}
li:nth-child(odd) span { background:orange;}
li:nth-child(even) span { background:pink;}
li span:hover {
    opacity:1;
}
li span:hover + div {
    opacity:1;
    z-index:100;
}

HTML

<ul class="collection">
  <li class="thumb"><div>Default</div></li>
  <li class="thumb"><span>1</span><div>First</div></li>
  <li class="thumb"><span>2</span><div>Second</div></li>
  <li class="thumb"><span>3</span><div>Third</div></li>
  <li class="thumb"><span>4</span><div>4th</div></li>
  <li class="thumb"><span>5</span><div>5th</div></li>
  <li class="thumb"><span>6</span><div>6th</div></li>
</ul>

我的问题是没有响应，也无法使用图像。

需要帮助才能做出类似这样的事情 https://www.notjustalabel.com/designer/kindall-almond

可能没有jquery。

由于