Отображать <div> или <span> поверх изображения на: hover

Я ищу метод, который позволил быdiv или жеspan элемент, который появится над изображением, когда вы:hover над этим изображением. Я могу сделать это с помощью.image:hover ~ .overlay, но это не совсем то, что я ищу.div или жеspan Элемент должен принимать размеры изображений, так как будет несколько размеров.

пример

<img width="200" height="200"/>&nbsp;позволит вам:hover&nbsp;изменяяdiv&nbsp;или жеspan&nbsp;элемент изdisplay: none&nbsp;вdisplay: block&nbsp;(не обязательно должен быть блоком). Элемент, который изменяется с невидимого на видимый, должен автоматически определять размер изображения и сопоставлять размер элемента с теми же размерами (200x200). Тем не менее, я мог бы также иметь<img width="300" height="400"/>&nbsp;для этого нужно, чтобы элемент соответствовал размеру (300x400).

Я также ищу супер простой способ, чтобы эти элементы идеально располагались на изображениях.

Вот мой код ручка&nbsp;чтобы показать, что у меня так далеко.