#sliding_container {
	transform:translate(100%, 0%);
	width: 100000px;
	height: 77%;
	display: flex;
}

.moon-history {
  background-image:url("../png/FullMoon2010.png");
  background-size:cover;
  opacity: 65%;
	width: 100%;
	height: 100%;
}

.button {
	top: 90%;
}

body {
	overflow: hidden;
}
/* Container needed to position the ov. Adjust the width as needed */
/* {box-sizing: border-box} */

/* Container needed to position the ov. Adjust the width as needed */
.container {
  position: relative;
  float: left;
  margin-left:40px;
  margin-right:40px;
  align-self: flex-end;
}

/* Make the image to responsive */
.image {
  display: block;
  border-radius: 10px;
  width:100%;
  height:auto;

}

/* The ov effect - lays on top of the container and over the image */
.overlay {
  box-sizing: border-box;
  font-family: "Roboto-light";
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;

  font-size: 14px;
  padding: 20px;
  text-align: center;
  z-index: 2;
}

/* When you mouse over the container, fade in the o title */
.container:hover .overlay {
  opacity: 1;
}