.borde
    {  
      background-color :#C0FFE2;
     
    }
     .borde1
    {
      background-color :#ebeff1;
      padding-bottom: 0px;
    }
    .longitud
    {
      background-color :black;
      height: 200px;
    }

    .espacio
    {
      padding-top: 12px;
      text-align: center;
    }
      .espacio2
    {
      padding-top: 10px;
    }

    /* haces al div relativo, para controlar las posiciones internas */
.rings {
  position: relative;
  margin-top: 10px;
}

/* la imagen debe centrarse automaticamente */
.rings img {
  display: block;
  margin: 0 auto;
}

/* el titulo lo ubicamos en centro, pero puede moverse */
.rings .titulo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: transparent;
}

/* cuando pones el mouse sobre el anchor, opacidad de la imagen */
.rings a:hover img {
  opacity: 0.4;
  transition: transform 0.5s ease-out;
}

/* cuando pones el mouse sobre el anchor, propiedades del texto */
.rings a:hover .titulo {
  color: white;
}