Afficher <div> ou <span> plus d'images sur :hover

Je suis à la recherche d'une méthode qui permettrait à un div ou span élément d'apparaître sur une image lorsque vous :hover sur cette image. Je suis capable de faire cela à l'aide de la .image:hover ~ .overlay, mais ce n'est pas exactement ce que je cherche. Le div ou span élément doit prendre les dimensions des images, car il y aura plusieurs tailles.

Exemple

<img width="200" height="200"/> vous permettra de :hover la modification de la div ou span élément de display: none à display: block (n'a pas nécessairement besoin d'être un bloc). L'élément qui est en train de changé de l'invisible au visible aurait pour détecter automatiquement la taille de l'image et de l'adapter à la taille de l'élément à ces mêmes dimensions (200x200). Cependant, je pourrais aussi avoir un <img width="300" height="400"/> qui aurait besoin de l'élément en fonction de la taille (300x400).

Je suis aussi à la recherche d'un moyen super facile pour que ces éléments soient parfaitement positionné sur les images.

Voici mon code pen pour montrer ce que j'ai obtenu jusqu'à présent.

Jetez un oeil à cette réponse j'ai donné tout à l'heure; c'est à l'aide de la :after pseudo élément.. voudriez-vous quelque chose le long de ces longs, ou souhaitez-vous que le contenu réel d'être un élément du DOM?
C'est presque exactement ce que je cherche, mais j'ai besoin de le contenu réel d'être un élément du DOM. P. S. j'aime à quelle vitesse vous êtes en mesure de répondre à des questions 🙂

OriginalL'auteur Matthew Beckman | 2014-01-27