.circulo, .circulo--informacoes {transition: all 1s;}

.circulo {

  background-color: yellow;

  height: 16px; width: 16px;

  border-radius: 100%;

  overflow: hidden;

  outline: none;

}

.circulo--informacoes {opacity: 0;}

.circulo:focus {width: 64px; height: 64px; padding: 64px;}

.circulo:focus .circulo--informacoes {opacity: 1;}

​

/* Para colocar legenda*/

.circulo, .circulo--label{display: inline-block;}

.circulo:focus + .circulo--label {display: none;}