#boxes {
	width: 700px;
	margin: auto;
}
#boxes {
	margin-top: 40px;
	/* places each image in it's own horizontal column */
	/* seems to give padding or margin as well? */
	-moz-column-count: 3;
	-webkit-column-count: 3;
	-o-column-count: 3;
	column-count: 3;
}
#boxes img {
	border: 2px solid #92FF63;
}
.image_block {
	width: 204px; /* images are 200px wide plus 2 pixel border on each size */
	position:relative; /* box cover will be relative to this */
	overflow:hidden; /* makes the cover disappear at the bottom of the image */
}

.image_block .cover {
  position:absolute; /* cover positioning */
  bottom:0px; /* makes cover appear */ /* ? */
  /*opacity:1;*/ /* starting opacity */ /* is this needed with the rgba? */
  padding:15px; /* padding around text */
  width:174px; /* stretches the cover the full length of the image */
  background:rgba(146,255,99,0.8); /* just the element not the text */
  transition:all 1s; /* slows down cver appearing over the image */
}

.image_block:hover .cover {
  bottom:-50px; /* creates the cover on the image going to under the image to over the image */
  opacity:0; /* fades the image out to zero opacity on hover */
}

/* ? */ /* seems to work fine without this */
/*.cover {
	overflow:hidden;
	position:absolute;
	position:-50px;	
}*/