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

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

пример

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

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

Вот'мой код ручка чтобы показать, что яу нас так далеко

Ответы на вопрос(1)

Ваш ответ на вопрос