.original {
        display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url("http://www.seg.guanajuato.gob.mx/Estudiantes/PublishingImages/Inicio/calendario2.png") no-repeat;/* La imagen sustituta */
  width: 300px; /* La anchura de la nueva imagen */
  height: 300px; /* La altura de la nueva imagen */
  padding-left: 300px; /* Igual a la anchura de la nueva imagen */
}

.botox {
  position: relative;
  height: 200px;
  width: 200px;
  margin: 20px 20px 20px 20px;
  float: left;
}

.botox img {
  position: absolute;
  left: -30;
  transition: opacity 1s ease-in-out;
  margin: -20px 0px 0 -20px;
}

.botox img.top:hover {
  opacity: 0;
}

.cuadros {
  margin: -60px 10px 0px -15px;
  padding: 0px 0px 5px 124px;
}

.grid {
    max-width: 69em;
    list-style: none;
    margin: 30px auto;
    padding: 0;
	position: relative;
	height: 986px; 
	
}

.grid li img {
    outline: 0;
    border: 0;
    display: block;
    max-width: 100%;
}
.grid img:hover {
    opacity: 1;
}