What is the difference between and

I have been working on some custom checkboxes and ran into an unusual feature - the only way positioning stacks them up is if '.init' and '.hover' are assigned to imgs, and the only way the '.done' class is displayed is if it's assigned to Image.

JSX code

    <div  className={styles.container}>
      <input className={styles.ckb} type="checkbox" name="vt" id="ckb"/>
      <label htmlFor="ckb">
        <img src="VT/vt-.svg" height={88} width={88} className={styles.init}/>
        <img src="VT/vt.svg" height={88} width={88} className={styles.hover} />
        <Image src="VT/vtD.svg" height={88} width={88} className={styles.done} />
       <span className={styles.lab}>: VEGE :</span>
      </label>
    </div>

and CSS

`
.container {
    display: block;
    position: relative;
}

.init {
    position: absolute;
    top: 0; left: 0;
}
.hover {opacity: 0;
    position: absolute;
    top: 0; left: 0;
}

.done {opacity: 0;
    position: absolute;
    top: 0; left: 0;
}

input[type='checkbox'].ckb {
opacity: 1;
cursor: pointer;
position: absolute;
}

input[type='checkbox'].ckb:hover + label .hover {
    opacity: 1;
    display: inline;
    }

input[type='checkbox'].ckb:checked + label .done {
    opacity: 1;
    display: inline;
    }
`

This begs the question - how come?