Estoy buscando un método que permita unadiv ospan elemento que aparece sobre una imagen cuando:hover sobre esa imagen. Soy capaz de hacer esto usando el.image:hover ~ .overlay, pero no es exactamente lo que estoy buscando. losdiv ospan El elemento necesita tomar las dimensiones de las imágenes, ya que habrá múltiples tamaños.

Ejemplo

<img width="200" height="200"/> te permitiría:hover cambiando eldiv ospan elemento dedisplay: none adisplay: block (no necesariamente tiene que ser un bloque). El elemento que se está cambiando de invisible a visible tendría que detectar automáticamente el tamaño de la imagen y hacer coincidir el tamaño del elemento con estas mismas dimensiones (200x200). Sin embargo, también podría tener una<img width="300" height="400"/> que necesitaría el elemento para que coincida con el tamaño (300x400).

También estoy buscando una forma súper fácil de colocar estos elementos perfectamente sobre las imágenes.

Aquí está mi código de pluma para mostrar lo que tengo hasta ahora.