* {
  margin: 0;
  padding: 0;
  transition: all 0.4s linear;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
ul {
  list-style: none;
}

a {
  text-decoration: none;
  outline: none;
}

.tn-img {
  border: none;
}

.tn-wrap {
  width: 735px;
  height: 420px;
  position: relative;
}

.tn-banner {
  width: 705px;
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
}

.tn-banner .tn-li {
  width: 97px;
  height: 122px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  float: left;
}

.tn-img {
  width: 222px;
  position: absolute;
  left: 0;
  top: 0;
}
.tn-banner .tn-li:hover {
    width: 122px;
}
.tn-banner .tn-li:hover .tn-img{
    left: -100px;
}