html, body {
  border: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
body { background-color:#f7f7f7;}
#container {
  margin: 150px auto;
  width: 600px;
  height: 600px;
  overflow: hidden;
}

#gridacord-container {
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  flex-direction: column;
  overflow: hidden;
}

#container .line {
  display: flex;
  width: 100%;
  overflow: hidden;
  outline: 5px solid #fafafa;
  z-index: 5;
}

#container .line .item {
  height: 100%;
  overflow: hidden;
  outline: 5px solid #fafafa;
  z-index: 5;
}

#container .item img {
  position: relative;
  transition: filter 1s ease-in-out;
  -webkit-transition: -webkit-filter 1s ease-in-out;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

#container .item:hover > img {
  transition: filter 1s ease-in-out;
  -webkit-transition: -webkit-filter 1s ease-in-out;
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}