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.
: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
Vous devez vous connecter pour publier un commentaire.
De même pour cette réponse que j'ai donné, vous pourriez absolument position de la
.overlay
élément par rapport à l'élément parent et lui donner une hauteur et une largeur de100%
cela devrait fonctionner pour tous lesimg
tailles étant donné que l'élément parent serainline-block
(c'est la même taille que son contenant les éléments).EXEMPLE
Structure HTML:
Général CSS:
Cacher la
.overlay
élément par défaut, et utilisez le sélecteur.image:hover .overlay
pour modifier le style sur le vol stationnaire. En raison de la structure HTML, cela fonctionne bien parce que.overlay
est un descendant de l'élément. Vous pouvez donc éviter d'utiliser du general/adjacentes, de frère, de combinators+
,~
. Box-sizing est utilisée pour calculer les dimensions des éléments à l'égard de la frontière, rembourrage.. etc.OriginalL'auteur Josh Crozier