* {
  margin: 0;
  padding: 0;
}
.total {
  width: 400px;
  height: 400px;
  position: relative;
}
.large {
  width: 400px;
  height: 400px;
  position: absolute;
  left: 405px;
  top: 0;
  overflow: hidden;
  display: none;
}
.large img {
  position: absolute;
  width: 300%;
  height: 300%;
}
.total img {
  width: 100%;
  height: 100%;
}
.total span {
  width: 100px;
  height: 100px;
  display: none;
  background-color: gray;
  opacity: .5;
  position: absolute;
  top: 0;
  left: 0;
}