<!-- Interactive merge between 1D and a 2D barcode with pure CSS -->

<div id="qrcode-container"><div id="qrcode"></div></div>
/*

qr code optimal resolution 290px
barcode optimal resolution 233px

*/

@r: #000000;
@size: 23.3rem;
@step: 1em / 29;
@step2: 1em / 233;

html{
  font-size:62.5%;
}

body{
  padding:30px;
  
  background:url(https://subtlepatterns.com/patterns/subtlenet2.png);
}

/* Container is to create a larger hover area */

#qrcode-container{
  /* centering */
  margin:auto auto;
  
  /* sticker look */
  padding: 5.0rem 5.0rem 5.0rem 5.0rem;
  background:#FFF;
  box-shadow:0 .2rem .1rem #999, 0 0 .8rem #AAA, 0 .2rem .8rem #EEE;
  border-radius: 1.961rem;
  
  /* normal styles */
  font-size:@size;
  width:1em;
  height:1em;
}

#qrcode{
  display: inline-block;
	height:1em;
  width:@step2;

  background:@r;
  position:relative;
  transition:all 0.6s ease-in-out;
  margin-right:1em - @step2;
  margin-bottom: 0;
  
  box-shadow:
    1 * @step2 0 @r,
    3 * @step2 0 @r,
    6 * @step2 0 @r,
    11 * @step2 0 @r,
    14 * @step2 0 @r,
    15 * @step2 0 @r,
    20 * @step2 0 @r,
    22 * @step2 0 @r,
    25 * @step2 0 @r,
    26 * @step2 0 @r,
    27 * @step2 0 @r,
    28 * @step2 0 @r,
    30 * @step2 0 @r,
    33 * @step2 0 @r,
    36 * @step2 0 @r,
    37 * @step2 0 @r,
    38 * @step2 0 @r,
    39 * @step2 0 @r,
    41 * @step2 0 @r,
    44 * @step2 0 @r,
    46 * @step2 0 @r,
    49 * @step2 0 @r,
    50 * @step2 0 @r,
    51 * @step2 0 @r,
    52 * @step2 0 @r,
    55 * @step2 0 @r,
    56 * @step2 0 @r,
    57 * @step2 0 @r,
    60 * @step2 0 @r,
    63 * @step2 0 @r,
    64 * @step2 0 @r,
    66 * @step2 0 @r,
    68 * @step2 0 @r,
    69 * @step2 0 @r,
    70 * @step2 0 @r,
    73 * @step2 0 @r,
    74 * @step2 0 @r,
    77 * @step2 0 @r,
    79 * @step2 0 @r,
    80 * @step2 0 @r,
    81 * @step2 0 @r,
    84 * @step2 0 @r,
    85 * @step2 0 @r,
    88 * @step2 0 @r,
    93 * @step2 0 @r,
    96 * @step2 0 @r,
    97 * @step2 0 @r,
    99 * @step2 0 @r,
    102 * @step2 0 @r,
    103 * @step2 0 @r,
    108 * @step2 0 @r,
    110 * @step2 0 @r,
    112 * @step2 0 @r,
    113 * @step2 0 @r,
    116 * @step2 0 @r,
    121 * @step2 0 @r,
    123 * @step2 0 @r,
    124 * @step2 0 @r,
    125 * @step2 0 @r,
    126 * @step2 0 @r,
    129 * @step2 0 @r,
    132 * @step2 0 @r,
    137 * @step2 0 @r,
    138 * @step2 0 @r,
    140 * @step2 0 @r,
    143 * @step2 0 @r,
    146 * @step2 0 @r,
    147 * @step2 0 @r,
    149 * @step2 0 @r,
    154 * @step2 0 @r,
    155 * @step2 0 @r,
    160 * @step2 0 @r,
    162 * @step2 0 @r,
    165 * @step2 0 @r,
    168 * @step2 0 @r,
    169 * @step2 0 @r,
    172 * @step2 0 @r,
    173 * @step2 0 @r,
    174 * @step2 0 @r,
    176 * @step2 0 @r,
    181 * @step2 0 @r,
    183 * @step2 0 @r,
    184 * @step2 0 @r,
    187 * @step2 0 @r,
    191 * @step2 0 @r,
    192 * @step2 0 @r,
    193 * @step2 0 @r,
    194 * @step2 0 @r,
    196 * @step2 0 @r,
    198 * @step2 0 @r,
    199 * @step2 0 @r,
    200 * @step2 0 @r,
    201 * @step2 0 @r,
    203 * @step2 0 @r,
    204 * @step2 0 @r,
    205 * @step2 0 @r,
    207 * @step2 0 @r,
    209 * @step2 0 @r,
    210 * @step2 0 @r,
    213 * @step2 0 @r,
    216 * @step2 0 @r,
    217 * @step2 0 @r,
    218 * @step2 0 @r,
    220 * @step2 0 @r,
    221 * @step2 0 @r,
    225 * @step2 0 @r,
    226 * @step2 0 @r,
    227 * @step2 0 @r,
    229 * @step2 0 @r,
    231 * @step2 0 @r,
    232 * @step2 0 @r;
  
}

#qrcode-container:hover #qrcode{

   animation-name: barcode-qrcode;
   animation-duration: 2s;
   animation-iteration-count: 1;
   animation-direction: alternate;
   animation-timing-function: ease-in-out;
   animation-fill-mode: forwards;
   animation-delay: 0s;
    
}

.hover{
   animation-name: barcode-qrcode;
   animation-duration: 2s;
   animation-iteration-count: 1;
   animation-direction: reverse;
   animation-timing-function: ease-in-out;
   animation-fill-mode: backwards;
   animation-delay: 0s;
}

@keyframes barcode-qrcode {
	0%   {
  
    height:1em;
  	width:@step2;
    margin-right:1em - @step2;
    margin-bottom: 0;
    
    box-shadow:
    1 * @step2 0 @r,
    3 * @step2 0 @r,
    6 * @step2 0 @r,
    11 * @step2 0 @r,
    14 * @step2 0 @r,
    15 * @step2 0 @r,
    20 * @step2 0 @r,
    22 * @step2 0 @r,
    25 * @step2 0 @r,
    26 * @step2 0 @r,
    27 * @step2 0 @r,
    28 * @step2 0 @r,
    30 * @step2 0 @r,
    33 * @step2 0 @r,
    36 * @step2 0 @r,
    37 * @step2 0 @r,
    38 * @step2 0 @r,
    39 * @step2 0 @r,
    41 * @step2 0 @r,
    44 * @step2 0 @r,
    46 * @step2 0 @r,
    49 * @step2 0 @r,
    50 * @step2 0 @r,
    51 * @step2 0 @r,
    52 * @step2 0 @r,
    55 * @step2 0 @r,
    56 * @step2 0 @r,
    57 * @step2 0 @r,
    60 * @step2 0 @r,
    63 * @step2 0 @r,
    64 * @step2 0 @r,
    66 * @step2 0 @r,
    68 * @step2 0 @r,
    69 * @step2 0 @r,
    70 * @step2 0 @r,
    73 * @step2 0 @r,
    74 * @step2 0 @r,
    77 * @step2 0 @r,
    79 * @step2 0 @r,
    80 * @step2 0 @r,
    81 * @step2 0 @r,
    84 * @step2 0 @r,
    85 * @step2 0 @r,
    88 * @step2 0 @r,
    93 * @step2 0 @r,
    96 * @step2 0 @r,
    97 * @step2 0 @r,
    99 * @step2 0 @r,
    102 * @step2 0 @r,
    103 * @step2 0 @r,
    108 * @step2 0 @r,
    110 * @step2 0 @r,
    112 * @step2 0 @r,
    113 * @step2 0 @r,
    116 * @step2 0 @r,
    121 * @step2 0 @r,
    123 * @step2 0 @r,
    124 * @step2 0 @r,
    125 * @step2 0 @r,
    126 * @step2 0 @r,
    129 * @step2 0 @r,
    132 * @step2 0 @r,
    137 * @step2 0 @r,
    138 * @step2 0 @r,
    140 * @step2 0 @r,
    143 * @step2 0 @r,
    146 * @step2 0 @r,
    147 * @step2 0 @r,
    149 * @step2 0 @r,
    154 * @step2 0 @r,
    155 * @step2 0 @r,
    160 * @step2 0 @r,
    162 * @step2 0 @r,
    165 * @step2 0 @r,
    168 * @step2 0 @r,
    169 * @step2 0 @r,
    172 * @step2 0 @r,
    173 * @step2 0 @r,
    174 * @step2 0 @r,
    176 * @step2 0 @r,
    181 * @step2 0 @r,
    183 * @step2 0 @r,
    184 * @step2 0 @r,
    187 * @step2 0 @r,
    191 * @step2 0 @r,
    192 * @step2 0 @r,
    193 * @step2 0 @r,
    194 * @step2 0 @r,
    196 * @step2 0 @r,
    198 * @step2 0 @r,
    199 * @step2 0 @r,
    200 * @step2 0 @r,
    201 * @step2 0 @r,
    203 * @step2 0 @r,
    204 * @step2 0 @r,
    205 * @step2 0 @r,
    207 * @step2 0 @r,
    209 * @step2 0 @r,
    210 * @step2 0 @r,
    213 * @step2 0 @r,
    216 * @step2 0 @r,
    217 * @step2 0 @r,
    218 * @step2 0 @r,
    220 * @step2 0 @r,
    221 * @step2 0 @r,
    225 * @step2 0 @r,
    226 * @step2 0 @r,
    227 * @step2 0 @r,
    229 * @step2 0 @r,
    231 * @step2 0 @r,
    232 * @step2 0 @r;
  
  }
  
  50%  {
  
    width:@step;
  	height:1em;
    margin-right:1em - @step;
    margin-bottom: 0;
    
    box-shadow:
		/* Row 1 */
  
    1 * @step 0 @r,
    2 * @step 0 @r,
    3 * @step 0 @r,
    4 * @step 0 @r,
    5 * @step 0 @r,
    6 * @step 0 @r,    
    14 * @step 0 @r,
    22 * @step 0 @r,
    23 * @step 0 @r,    
    24 * @step 0 @r,
    25 * @step 0 @r,
    26 * @step 0 @r,
    27 * @step 0 @r,
    28 * @step 0 @r,

    /* Row 2 */

    0 0 @r,
    6 * @step 0 @r,    
    11 * @step 0 @r,
    12 * @step 0 @r,
    15 * @step 0 @r,
    22 * @step 0 @r,
    28 * @step 0 @r,

    /* Row 3 */

    0 0 @r,
    2 * @step 0 @r,
    3 * @step 0 @r,
    4 * @step 0 @r,
    6 * @step 0 @r,    
    9 * @step 0 @r,
    10 * @step 0 @r,
    11 * @step 0 @r,
    14 * @step 0 @r,
    16 * @step 0 @r,
    18 * @step 0 @r,
    19 * @step 0 @r,
    22 * @step 0 @r,
    24 * @step 0 @r,
    25 * @step 0 @r,
    26 * @step 0 @r,
    28 * @step 0 @r,

    /* Row 4 */

    0 0 @r,
    2 * @step 0 @r,
    3 * @step 0 @r,
    4 * @step 0 @r,
    6 * @step 0 @r,    
    10 * @step 0 @r,
    11 * @step 0 @r,
    12 * @step 0 @r,
    13 * @step 0 @r,
    16 * @step 0 @r,
    17 * @step 0 @r,
    20 * @step 0 @r,
    22 * @step 0 @r,
    24 * @step 0 @r,
    25 * @step 0 @r,
    26 * @step 0 @r,
    28 * @step 0 @r,

   /* Row 5 */
   
    0 0 @r, 
    2 * @step 0 @r,
    3 * @step 0 @r,
    4 * @step 0 @r,
    6 * @step 0 @r,    
    8 * @step 0 @r,
    9 * @step 0 @r,
    11 * @step 0 @r,
    13 * @step 0 @r,
    14 * @step 0 @r,
    15 * @step 0 @r,
    19 * @step 0 @r,
    22 * @step 0 @r,
    24 * @step 0 @r,
    25 * @step 0 @r,
    26 * @step 0 @r,
    28 * @step 0 @r,
    
    /* Row 6 */
 
    0 0 @r, 
    6 * @step 0 @r,    
    10 * @step 0 @r,
    12 * @step 0 @r,
    13 * @step 0 @r,
    14 * @step 0 @r,
    17 * @step 0 @r,
    18 * @step 0 @r,
    19 * @step 0 @r,
    20 * @step 0 @r,
    22 * @step 0 @r,
    28 * @step 0 @r,

    /* Row 7 */
	
    0 0 @r,
    1 * @step 0 @r,
    2 * @step 0 @r,
    3 * @step 0 @r,
    4 * @step 0 @r,
    5 * @step 0 @r,
    6 * @step 0 @r,    
    8 * @step 0 @r,
    10 * @step 0 @r,
    12 * @step 0 @r,
    14 * @step 0 @r,
    16 * @step 0 @r,
    18 * @step 0 @r,
    20 * @step 0 @r,
    22 * @step 0 @r,
    23 * @step 0 @r,    
    24 * @step 0 @r,
    25 * @step 0 @r,
    26 * @step 0 @r,
    27 * @step 0 @r,
    28 * @step 0 @r,

    /* Row 8 */

    8 * @step 0 @r,
    9 * @step 0 @r,
    10 * @step 0 @r,
    13 * @step 0 @r,
    16 * @step 0 @r,
    
    /* Row 9 */

    2 * @step 0 @r,
    3 * @step 0 @r,
    6 * @step 0 @r,    
    7 * @step 0 @r,
    8 * @step 0 @r,
    9 * @step 0 @r,
    12 * @step 0 @r,
    13 * @step 0 @r,
    15 * @step 0 @r,
    18 * @step 0 @r,
    19 * @step 0 @r,
    21 * @step 0 @r,
    22 * @step 0 @r,
    24 * @step 0 @r,

    /* Row 10 */

    0 0 @r,
    1 * @step 0 @r,
    2 * @step 0 @r,
    3 * @step 0 @r,
    5 * @step 0 @r,
    8 * @step 0 @r,
    9 * @step 0 @r,
    11 * @step 0 @r,
    13 * @step 0 @r,
    14 * @step 0 @r,
    16 * @step 0 @r,
    18 * @step 0 @r,
    20 * @step 0 @r,
    21 * @step 0 @r,
    22 * @step 0 @r,
    24 * @step 0 @r,
    25 * @step 0 @r,
    26 * @step 0 @r,
    28 * @step 0 @r,

    /* Row 11 */

    3 * @step 0 @r,
    6 * @step 0 @r,    
    10 * @step 0 @r,
    15 * @step 0 @r,
    17 * @step 0 @r,
    19 * @step 0 @r,
    20 * @step 0 @r,
    21 * @step 0 @r,
    22 * @step 0 @r,
    27 * @step 0 @r,

    /* Row 12 */

    1 * @step 0 @r,
    2 * @step 0 @r,
    3 * @step 0 @r,
    9 * @step 0 @r,
    11 * @step 0 @r,
    12 * @step 0 @r,
    14 * @step 0 @r,
    15 * @step 0 @r,
    16 * @step 0 @r,
    17 * @step 0 @r,
    18 * @step 0 @r,
    20 * @step 0 @r,
    21 * @step 0 @r,
    23 * @step 0 @r,    
    24 * @step 0 @r,
    25 * @step 0 @r,
    28 * @step 0 @r,
    
    /* Row 13 */
 
    0 0 @r,  
    1 * @step 0 @r,
    2 * @step 0 @r,
    4 * @step 0 @r,
    6 * @step 0 @r,
    14 * @step 0 @r,
    16 * @step 0 @r,
    19 * @step 0 @r,
    21 * @step 0 @r,
    26 * @step 0 @r,
    27 * @step 0 @r,  
    28 * @step 0 @r,

    /* Row 14 */
    
    0 0 @r,  
    2 * @step 0 @r,
    3 * @step 0 @r,
    4 * @step 0 @r,
    5 * @step 0 @r,
    10 * @step 0 @r,
    12 * @step 0 @r,
    13 * @step 0 @r,  
    14 * @step 0 @r,
    15 * @step 0 @r,
    16 * @step 0 @r,
    17 * @step 0 @r,
    19 * @step 0 @r,
    22 * @step 0 @r,
    23 * @step 0 @r,
    25 * @step 0 @r,
    26 * @step 0 @r,
    28 * @step 0 @r,
    
    /* Row 15 */
    
    0 0 @r,  
    4 * @step 0 @r,
    5 * @step 0 @r,
    6 * @step 0 @r,
    7 * @step 0 @r,  
    9 * @step 0 @r,
    13 * @step 0 @r,
    16 * @step 0 @r,
    18 * @step 0 @r,
    19 * @step 0 @r,
    21 * @step 0 @r,
    24 * @step 0 @r,
    25 * @step 0 @r,
    27 * @step 0 @r,
    28 * @step 0 @r,

    /* Row 16 */
    
    2 * @step 0 @r,
    5 * @step 0 @r,
    7 * @step 0 @r,
    10 * @step 0 @r,
    13 * @step 0 @r,
    14 * @step 0 @r,
    15 * @step 0 @r,  
    22 * @step 0 @r,
    25 * @step 0 @r,
    28 * @step 0 @r,
    
    /* Row 17 */
    
    0 0 @r,  
    3 * @step 0 @r,
    4 * @step 0 @r,
    5 * @step 0 @r,
    6 * @step 0 @r,
    7 * @step 0 @r,
    9 * @step 0 @r,
    11 * @step 0 @r,  
    12 * @step 0 @r,
    16 * @step 0 @r,
    19 * @step 0 @r,
    23 * @step 0 @r,
    24 * @step 0 @r,
    25 * @step 0 @r,
    27 * @step 0 @r,
    
    /* Row 18 */
    
    2 * @step 0 @r,
    12 * @step 0 @r,
    15 * @step 0 @r,  
    18 * @step 0 @r,
    19 * @step 0 @r,
    22 * @step 0 @r,
    23 * @step 0 @r,
    26 * @step 0 @r,
    
    /* Row 19 */
    
    0 0 @r,  
    5 * @step 0 @r,
    6 * @step 0 @r,
    9 * @step 0 @r,
    5 * @step 0 @r,
    14 * @step 0 @r,
    16 * @step 0 @r,
    20 * @step 0 @r,  
    22 * @step 0 @r,
    23 * @step 0 @r,
    26 * @step 0 @r,
    
    /* Row 20 */
    
    3 * @step 0 @r,
    4 * @step 0 @r,
    5 * @step 0 @r,
    7 * @step 0 @r,
    8 * @step 0 @r,
    9 * @step 0 @r,  
    10 * @step 0 @r,
    12 * @step 0 @r,
    14 * @step 0 @r,
    15 * @step 0 @r,
    16 * @step 0 @r,
    18 * @step 0 @r,
    20 * @step 0 @r,
    21 * @step 0 @r,
    22 * @step 0 @r,
    24 * @step 0 @r,
    25 * @step 0 @r,
    26 * @step 0 @r,
    27 * @step 0 @r,
    28 * @step 0 @r,
    
    /* Row 21 */
    
    1 * @step 0 @r,
    2 * @step 0 @r,
    3 * @step 0 @r,
    6 * @step 0 @r,
    10 * @step 0 @r,
    12 * @step 0 @r,
    13 * @step 0 @r,  
    14 * @step 0 @r,
    19 * @step 0 @r,
    20 * @step 0 @r,
    21 * @step 0 @r,
    22 * @step 0 @r,
    23 * @step 0 @r,
    24 * @step 0 @r,
    25 * @step 0 @r,
    26 * @step 0 @r,
    28 * @step 0 @r,
    
    /* Row 22 */
    
    8 * @step 0 @r,
    11 * @step 0 @r,
    15 * @step 0 @r,  
    16 * @step 0 @r,
    17 * @step 0 @r,
    20 * @step 0 @r,
    24 * @step 0 @r,
    25 * @step 0 @r,
    27 * @step 0 @r,
    28 * @step 0 @r,
    
    /* Row 23 */
    
    0 0 @r,  
    1 * @step 0 @r,
    2 * @step 0 @r,
    3 * @step 0 @r,
    4 * @step 0 @r,
    5 * @step 0 @r,
    6 * @step 0 @r,
    8 * @step 0 @r,  
    9 * @step 0 @r,
    10 * @step 0 @r,
    11 * @step 0 @r,
    19 * @step 0 @r,
    20 * @step 0 @r,
    22 * @step 0 @r,
    24 * @step 0 @r,
    26 * @step 0 @r,
    27 * @step 0 @r,
    
    /* Row 24 */
    
    0 0 @r,  
    6 * @step 0 @r,
    10 * @step 0 @r,
    13 * @step 0 @r,
    14 * @step 0 @r,  
    15 * @step 0 @r,
    16 * @step 0 @r,
    20 * @step 0 @r,
    24 * @step 0 @r,
    27 * @step 0 @r,
    28 * @step 0 @r,
    
    /* Row 25 */
    
    0 0 @r,  
    2 * @step 0 @r,
    3 * @step 0 @r,
    4 * @step 0 @r,
    6 * @step 0 @r,
    10 * @step 0 @r,
    11 * @step 0 @r,
    13 * @step 0 @r,  
    14 * @step 0 @r,
    15 * @step 0 @r,
    18 * @step 0 @r,
    20 * @step 0 @r,
    21 * @step 0 @r,
    22 * @step 0 @r,
    23 * @step 0 @r,
    24 * @step 0 @r,
    25 * @step 0 @r,
    26 * @step 0 @r,
    27 * @step 0 @r,
    28 * @step 0 @r,
  
    /* Row 26 */
    
    0 0 @r,  
    2 * @step 0 @r,
    3 * @step 0 @r,
    4 * @step 0 @r,
    6 * @step 0 @r,
    8 * @step 0 @r,
    9 * @step 0 @r,
    10 * @step 0 @r,  
    12 * @step 0 @r,
    13 * @step 0 @r,
    16 * @step 0 @r,
    20 * @step 0 @r,
    21 * @step 0 @r,
    24 * @step 0 @r,
    26 * @step 0 @r,
    27 * @step 0 @r,
    
    /* Row 27 */
    
    0 0 @r,  
    2 * @step 0 @r,
    3 * @step 0 @r,
    4 * @step 0 @r,
    6 * @step 0 @r,
    8 * @step 0 @r,
    11 * @step 0 @r,
    12 * @step 0 @r,  
    16 * @step 0 @r,
    26 * @step 0 @r,
    28 * @step 0 @r,
    
    /* Row 28 */
    
    0 0 @r,  
    6 * @step 0 @r,
    9 * @step 0 @r,
    11 * @step 0 @r,
    12 * @step 0 @r,
    14 * @step 0 @r,
    16 * @step 0 @r,
    17 * @step 0 @r,  
    18 * @step 0 @r,
    22 * @step 0 @r,
    24 * @step 0 @r,
    25 * @step 0 @r,
    27 * @step 0 @r,
    
    /* Row 29 */
    
    0 0 @r,  
    1 * @step 0 @r,
    2 * @step 0 @r,
    3 * @step 0 @r,
    4 * @step 0 @r,
    5 * @step 0 @r,
    6 * @step 0 @r,
    9 * @step 0 @r,  
    11 * @step 0 @r,
    12 * @step 0 @r,
    13 * @step 0 @r,
    18 * @step 0 @r,
    19 * @step 0 @r,
    22 * @step 0 @r,
    23 * @step 0 @r,
    27 * @step 0 @r;
  
  
  }
  
	100% {
  
    width:@step;
  	height:@step;
    margin-right:1em - @step;
    margin-bottom: 1em - @step;
        
    box-shadow:
		/* Row 1 */
  
    1 * @step 0 @r,
    2 * @step 0 @r,
    3 * @step 0 @r,
    4 * @step 0 @r,
    5 * @step 0 @r,
    6 * @step 0 @r,    
    14 * @step 0 @r,
    22 * @step 0 @r,
    23 * @step 0 @r,    
    24 * @step 0 @r,
    25 * @step 0 @r,
    26 * @step 0 @r,
    27 * @step 0 @r,
    28 * @step 0 @r,

    /* Row 2 */

    0 1 * @step @r,
    6 * @step 1 * @step @r,    
    11 * @step 1 * @step @r,
    12 * @step 1 * @step @r,
    15 * @step 1 * @step @r,
    22 * @step 1 * @step @r,
    28 * @step 1 * @step @r,

    /* Row 3 */

    0 2 * @step @r,
    2 * @step 2 * @step @r,
    3 * @step 2 * @step @r,
    4 * @step 2 * @step @r,
    6 * @step 2 * @step @r,    
    9 * @step 2 * @step @r,
    10 * @step 2 * @step @r,
    11 * @step 2 * @step @r,
    14 * @step 2 * @step @r,
    16 * @step 2 * @step @r,
    18 * @step 2 * @step @r,
    19 * @step 2 * @step @r,
    22 * @step 2 * @step @r,
    24 * @step 2 * @step @r,
    25 * @step 2 * @step @r,
    26 * @step 2 * @step @r,
    28 * @step 2 * @step @r,

    /* Row 4 */

    0 3 * @step @r,
    2 * @step 3 * @step @r,
    3 * @step 3 * @step @r,
    4 * @step 3 * @step @r,
    6 * @step 3 * @step @r,    
    10 * @step 3 * @step @r,
    11 * @step 3 * @step @r,
    12 * @step 3 * @step @r,
    13 * @step 3 * @step @r,
    16 * @step 3 * @step @r,
    17 * @step 3 * @step @r,
    20 * @step 3 * @step @r,
    22 * @step 3 * @step @r,
    24 * @step 3 * @step @r,
    25 * @step 3 * @step @r,
    26 * @step 3 * @step @r,
    28 * @step 3 * @step @r,

   /* Row 5 */
   
    0 4 * @step @r, 
    2 * @step 4 * @step @r,
    3 * @step 4 * @step @r,
    4 * @step 4 * @step @r,
    6 * @step 4 * @step @r,    
    8 * @step 4 * @step @r,
    9 * @step 4 * @step @r,
    11 * @step 4 * @step @r,
    13 * @step 4 * @step @r,
    14 * @step 4 * @step @r,
    15 * @step 4 * @step @r,
    19 * @step 4 * @step @r,
    22 * @step 4 * @step @r,
    24 * @step 4 * @step @r,
    25 * @step 4 * @step @r,
    26 * @step 4 * @step @r,
    28 * @step 4 * @step @r,
    
    /* Row 6 */
 
    0 5 * @step @r, 
    6 * @step 5 * @step @r,    
    10 * @step 5 * @step @r,
    12 * @step 5 * @step @r,
    13 * @step 5 * @step @r,
    14 * @step 5 * @step @r,
    17 * @step 5 * @step @r,
    18 * @step 5 * @step @r,
    19 * @step 5 * @step @r,
    20 * @step 5 * @step @r,
    22 * @step 5 * @step @r,
    28 * @step 5 * @step @r,

    /* Row 7 */
	
    0 6 * @step @r,
    1 * @step 6 * @step @r,
    2 * @step 6 * @step @r,
    3 * @step 6 * @step @r,
    4 * @step 6 * @step @r,
    5 * @step 6 * @step @r,
    6 * @step 6 * @step @r,    
    8 * @step 6 * @step @r,
    10 * @step 6 * @step @r,
    12 * @step 6 * @step @r,
    14 * @step 6 * @step @r,
    16 * @step 6 * @step @r,
    18 * @step 6 * @step @r,
    20 * @step 6 * @step @r,
    22 * @step 6 * @step @r,
    23 * @step 6 * @step @r,    
    24 * @step 6 * @step @r,
    25 * @step 6 * @step @r,
    26 * @step 6 * @step @r,
    27 * @step 6 * @step @r,
    28 * @step 6 * @step @r,

    /* Row 8 */

    8 * @step 7 * @step @r,
    9 * @step 7 * @step @r,
    10 * @step 7 * @step @r,
    13 * @step 7 * @step @r,
    16 * @step 7 * @step @r,
    
    /* Row 9 */

    2 * @step 8 * @step @r,
    3 * @step 8 * @step @r,
    6 * @step 8 * @step @r,    
    7 * @step 8 * @step @r,
    8 * @step 8 * @step @r,
    9 * @step 8 * @step @r,
    12 * @step 8 * @step @r,
    13 * @step 8 * @step @r,
    15 * @step 8 * @step @r,
    18 * @step 8 * @step @r,
    19 * @step 8 * @step @r,
    21 * @step 8 * @step @r,
    22 * @step 8 * @step @r,
    24 * @step 8 * @step @r,

    /* Row 10 */

    0 9 * @step @r,
    1 * @step 9 * @step @r,
    2 * @step 9 * @step @r,
    3 * @step 9 * @step @r,
    5 * @step 9 * @step @r,
    8 * @step 9 * @step @r,
    9 * @step 9 * @step @r,
    11 * @step 9 * @step @r,
    13 * @step 9 * @step @r,
    14 * @step 9 * @step @r,
    16 * @step 9 * @step @r,
    18 * @step 9 * @step @r,
    20 * @step 9 * @step @r,
    21 * @step 9 * @step @r,
    22 * @step 9 * @step @r,
    24 * @step 9 * @step @r,
    25 * @step 9 * @step @r,
    26 * @step 9 * @step @r,
    28 * @step 9 * @step @r,

    /* Row 11 */

    3 * @step 10 * @step @r,
    6 * @step 10 * @step @r,    
    10 * @step 10 * @step @r,
    15 * @step 10 * @step @r,
    17 * @step 10 * @step @r,
    19 * @step 10 * @step @r,
    20 * @step 10 * @step @r,
    21 * @step 10 * @step @r,
    22 * @step 10 * @step @r,
    27 * @step 10 * @step @r,

    /* Row 12 */

    1 * @step 11 * @step @r,
    2 * @step 11 * @step @r,
    3 * @step 11 * @step @r,
    9 * @step 11 * @step @r,
    11 * @step 11 * @step @r,
    12 * @step 11 * @step @r,
    14 * @step 11 * @step @r,
    15 * @step 11 * @step @r,
    16 * @step 11 * @step @r,
    17 * @step 11 * @step @r,
    18 * @step 11 * @step @r,
    20 * @step 11 * @step @r,
    21 * @step 11 * @step @r,
    23 * @step 11 * @step @r,    
    24 * @step 11 * @step @r,
    25 * @step 11 * @step @r,
    28 * @step 11 * @step @r,
    
    /* Row 13 */
 
    0 12 * @step @r,  
    1 * @step 12 * @step @r,
    2 * @step 12 * @step @r,
    4 * @step 12 * @step @r,
    6 * @step 12 * @step @r,
    14 * @step 12 * @step @r,
    16 * @step 12 * @step @r,
    19 * @step 12 * @step @r,
    21 * @step 12 * @step @r,
    26 * @step 12 * @step @r,
    27 * @step 12 * @step @r,  
    28 * @step 12 * @step @r,

    /* Row 14 */
    
    0 13 * @step @r,  
    2 * @step 13 * @step @r,
    3 * @step 13 * @step @r,
    4 * @step 13 * @step @r,
    5 * @step 13 * @step @r,
    10 * @step 13 * @step @r,
    12 * @step 13 * @step @r,
    13 * @step 13 * @step @r,  
    14 * @step 13 * @step @r,
    15 * @step 13 * @step @r,
    16 * @step 13 * @step @r,
    17 * @step 13 * @step @r,
    19 * @step 13 * @step @r,
    22 * @step 13 * @step @r,
    23 * @step 13 * @step @r,
    25 * @step 13 * @step @r,
    26 * @step 13 * @step @r,
    28 * @step 13 * @step @r,
    
    /* Row 15 */
    
    0 14 * @step @r,  
    4 * @step 14 * @step @r,
    5 * @step 14 * @step @r,
    6 * @step 14 * @step @r,
    7 * @step 14 * @step @r,  
    9 * @step 14 * @step @r,
    13 * @step 14 * @step @r,
    16 * @step 14 * @step @r,
    18 * @step 14 * @step @r,
    19 * @step 14 * @step @r,
    21 * @step 14 * @step @r,
    24 * @step 14 * @step @r,
    25 * @step 14 * @step @r,
    27 * @step 14 * @step @r,
    28 * @step 14 * @step @r,

    /* Row 16 */
    
    2 * @step 15 * @step @r,
    5 * @step 15 * @step @r,
    7 * @step 15 * @step @r,
    10 * @step 15 * @step @r,
    13 * @step 15 * @step @r,
    14 * @step 15 * @step @r,
    15 * @step 15 * @step @r,  
    22 * @step 15 * @step @r,
    25 * @step 15 * @step @r,
    28 * @step 15 * @step @r,
    
    /* Row 17 */
    
    0 16 * @step @r,  
    3 * @step 16 * @step @r,
    4 * @step 16 * @step @r,
    5 * @step 16 * @step @r,
    6 * @step 16 * @step @r,
    7 * @step 16 * @step @r,
    9 * @step 16 * @step @r,
    11 * @step 16 * @step @r,  
    12 * @step 16 * @step @r,
    16 * @step 16 * @step @r,
    19 * @step 16 * @step @r,
    23 * @step 16 * @step @r,
    24 * @step 16 * @step @r,
    25 * @step 16 * @step @r,
    27 * @step 16 * @step @r,
    
    /* Row 18 */
    
    2 * @step 17 * @step @r,
    12 * @step 17 * @step @r,
    15 * @step 17 * @step @r,  
    18 * @step 17 * @step @r,
    19 * @step 17 * @step @r,
    22 * @step 17 * @step @r,
    23 * @step 17 * @step @r,
    26 * @step 17 * @step @r,
    
    /* Row 19 */
    
    0 18 * @step @r,  
    5 * @step 18 * @step @r,
    6 * @step 18 * @step @r,
    9 * @step 18 * @step @r,
    5 * @step 18 * @step @r,
    14 * @step 18 * @step @r,
    16 * @step 18 * @step @r,
    20 * @step 18 * @step @r,  
    22 * @step 18 * @step @r,
    23 * @step 18 * @step @r,
    26 * @step 18 * @step @r,
    
    /* Row 20 */
    
    3 * @step 19 * @step @r,
    4 * @step 19 * @step @r,
    5 * @step 19 * @step @r,
    7 * @step 19 * @step @r,
    8 * @step 19 * @step @r,
    9 * @step 19 * @step @r,  
    10 * @step 19 * @step @r,
    12 * @step 19 * @step @r,
    14 * @step 19 * @step @r,
    15 * @step 19 * @step @r,
    16 * @step 19 * @step @r,
    18 * @step 19 * @step @r,
    20 * @step 19 * @step @r,
    21 * @step 19 * @step @r,
    22 * @step 19 * @step @r,
    24 * @step 19 * @step @r,
    25 * @step 19 * @step @r,
    26 * @step 19 * @step @r,
    27 * @step 19 * @step @r,
    28 * @step 19 * @step @r,
    
    /* Row 21 */
    
    1 * @step 20 * @step @r,
    2 * @step 20 * @step @r,
    3 * @step 20 * @step @r,
    6 * @step 20 * @step @r,
    10 * @step 20 * @step @r,
    12 * @step 20 * @step @r,
    13 * @step 20 * @step @r,  
    14 * @step 20 * @step @r,
    19 * @step 20 * @step @r,
    20 * @step 20 * @step @r,
    21 * @step 20 * @step @r,
    22 * @step 20 * @step @r,
    23 * @step 20 * @step @r,
    24 * @step 20 * @step @r,
    25 * @step 20 * @step @r,
    26 * @step 20 * @step @r,
    28 * @step 20 * @step @r,
    
    /* Row 22 */
    
    8 * @step 21 * @step @r,
    11 * @step 21 * @step @r,
    15* @step 21 * @step @r,  
    16 * @step 21 * @step @r,
    17 * @step 21 * @step @r,
    20 * @step 21 * @step @r,
    24 * @step 21 * @step @r,
    25 * @step 21 * @step @r,
    27 * @step 21 * @step @r,
    28 * @step 21 * @step @r,
    
    /* Row 23 */
    
    0 22 * @step @r,  
    1 * @step 22 * @step @r,
    2 * @step 22 * @step @r,
    3 * @step 22 * @step @r,
    4 * @step 22 * @step @r,
    5 * @step 22 * @step @r,
    6 * @step 22 * @step @r,
    8 * @step 22 * @step @r,  
    9 * @step 22 * @step @r,
    10 * @step 22 * @step @r,
    11 * @step 22 * @step @r,
    19 * @step 22 * @step @r,
    20 * @step 22 * @step @r,
    22 * @step 22 * @step @r,
    24 * @step 22 * @step @r,
    26 * @step 22 * @step @r,
    27 * @step 22 * @step @r,
    
    /* Row 24 */
    
    0 23 * @step @r,  
    6 * @step 23 * @step @r,
    10 * @step 23 * @step @r,
    13 * @step 23 * @step @r,
    14 * @step 23 * @step @r,  
    15 * @step 23 * @step @r,
    16 * @step 23 * @step @r,
    20 * @step 23 * @step @r,
    24 * @step 23 * @step @r,
    27 * @step 23 * @step @r,
    28 * @step 23 * @step @r,
    
    /* Row 25 */
    
    0 24 * @step @r,  
    2 * @step 24 * @step @r,
    3 * @step 24 * @step @r,
    4 * @step 24 * @step @r,
    6 * @step 24 * @step @r,
    10 * @step 24 * @step @r,
    11 * @step 24 * @step @r,
    13 * @step 24 * @step @r,  
    14 * @step 24 * @step @r,
    15 * @step 24 * @step @r,
    18 * @step 24 * @step @r,
    20 * @step 24 * @step @r,
    21 * @step 24 * @step @r,
    22 * @step 24 * @step @r,
    23 * @step 24 * @step @r,
    24 * @step 24 * @step @r,
    25 * @step 24 * @step @r,
    26 * @step 24 * @step @r,
    27 * @step 24 * @step @r,
    28 * @step 24 * @step @r,
  
    /* Row 26 */
    
    0 25 * @step @r,  
    2 * @step 25 * @step @r,
    3 * @step 25 * @step @r,
    4 * @step 25 * @step @r,
    6 * @step 25 * @step @r,
    8 * @step 25 * @step @r,
    9 * @step 25 * @step @r,
    10 * @step 25 * @step @r,  
    12 * @step 25 * @step @r,
    13 * @step 25 * @step @r,
    16 * @step 25 * @step @r,
    20 * @step 25 * @step @r,
    21 * @step 25 * @step @r,
    24 * @step 25 * @step @r,
    26 * @step 25 * @step @r,
    27 * @step 25 * @step @r,
    
    /* Row 27 */
    
    0 26 * @step @r,  
    2 * @step 26 * @step @r,
    3 * @step 26 * @step @r,
    4 * @step 26 * @step @r,
    6 * @step 26 * @step @r,
    8 * @step 26 * @step @r,
    11 * @step 26 * @step @r,
    12 * @step 26 * @step @r,  
    16 * @step 26 * @step @r,
    26 * @step 26 * @step @r,
    28 * @step 26 * @step @r,
    
    /* Row 28 */
    
    0 27 * @step @r,  
    6 * @step 27 * @step @r,
    9 * @step 27 * @step @r,
    11 * @step 27 * @step @r,
    12 * @step 27 * @step @r,
    14 * @step 27 * @step @r,
    16 * @step 27 * @step @r,
    17 * @step 27 * @step @r,  
    18 * @step 27 * @step @r,
    22 * @step 27 * @step @r,
    24 * @step 27 * @step @r,
    25 * @step 27 * @step @r,
    27 * @step 27 * @step @r,
    
    /* Row 29 */
    
    0 28 * @step @r,  
    1 * @step 28 * @step @r,
    2 * @step 28 * @step @r,
    3 * @step 28 * @step @r,
    4 * @step 28 * @step @r,
    5 * @step 28 * @step @r,
    6 * @step 28 * @step @r,
    9 * @step 28 * @step @r,  
    11 * @step 28 * @step @r,
    12 * @step 28 * @step @r,
    13 * @step 28 * @step @r,
    18 * @step 28 * @step @r,
    19 * @step 28 * @step @r,
    22 * @step 28 * @step @r,
    23 * @step 28 * @step @r,
    27 * @step 28 * @step @r;
  
  }
}
View Compiled
/* 

https://css-tricks.com/snippets/jquery/addingremoving-class-on-hover/

Advanced reverse @keyframe animation, not yet possible with pure css3.
So its done by adding and removind classes

*/

$('#qrcode-container').hover(
       function(){ $('#qrcode').removeClass('hover') },
       function(){ $('#qrcode').addClass('hover') }
)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js