Я ищу метод, который позволил бы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).

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

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