J'ai une image avec une superposition de div. La superposition de div apparaît sur Hover. Également sur la survolte, je veux un effet d'animation. Le problème est que l'effet d'animation se produit sur l'image et la superposition, mais je ne veux pas que l'effet d'animation se produise sur la superposition.
Ce code fonctionne, mais je ne suis pas en mesure d'empêcher l'animation de se produire sur le recouvrir. Quel code CSS fera que l'effet d'animation ne se produise que sur l'image?
Donc, dans le code ci-dessous, le CSS fonctionne sur l'image du conteneur, html CSS
3 Réponses :
Votre code n'a pas fonctionné. Je l'ai testé à travers Jsfiddle. Je pense que ce que vous voulez, c'est quelque chose comme ça
Bonjour ASAD, si vous ajoutez ceci à votre code: .Display {Padding-top: 200px; Couleur de l'arrière-plan: rgba (0, 0, 0, 0.6);} #Container {position: relatif; } .Container :: avant {position: absolu; TOP: 50%; à gauche: 50%; z-index: 999; bloc de visualisation; teneur: ''; largeur: 0; Hauteur: 0; Contexte: Orange; Rayon frontalier: 100%; -WebKit-Transform: Traduire (-60%, -60%); transformer: Traduire (-60%, -60%); opacité: 1; } .Container: Hover :: Avant {-WebKit-Animation: Cercle .55s; Animation: cercle .55s; }
@ -webkit-keyframes cercle {0% {opacité: 1; } 100% {largeur: 100%; Hauteur: 100%; opacité: 0; }} @keyframes cercle {0% {opacité: 1; } 100% {largeur: 100%; Hauteur: 100%; opacité: 0;}}
Vous verrez le problème: le cercle orange apparaît uniquement à l'écran, tandis que je veux que cela ne se produise que sur l'image (pas l'affichage)
@ user1864734 Pouvez-vous partager le lien vers votre code. Parce que ce que nous comprenons de votre déclaration de problème, c'est ce que nous vous fournissons. Merci
Bonjour Asad, regardez ici ... vous voyez le cercle orange arrive deux fois. Comment montrer uniquement le Centre Orange Circle. merci codépen.io/trynnn/pen/zyxzqbx
Bonjour @ user1864734 Merci d'avoir fourni l'URL de code. J'ai traversé votre code. La première chose que j'avais fait est de convertir votre code en CSS afin que je puisse facilement le trier. Parce que je n'ai pas beaucoup d'adhérence sur SCS / Sass? Moins. Quoi qu'il en soit, le problème était que lorsque vous avez surilli sur l'image, le cercle a montré. Et quand vous avez survolé le titre, le deuxième cercle a montré. Maintenant, lorsque vous arrivez au nom (survolé), un troisième cercle a montré (suite ...)
Merci, mais sur votre Codepen, la survolte de l'affichage du texte a cessé de fonctionner?
Le code que j'ai édité pour montrer que le cercle central est ici. Vous pouvez le vérifier lorsque vous allumez sur l'image. Le titre et le nom.
HTML est identique que le vôtre. CSS est
Vous utilisez le code ci-dessous. Exécutez l'extrait pour voir le résultat:
p>
<div class="container">
<a href='#' class="container-link">
<img src="https://www.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png" class="container-image" />
<div class="extra-layer"></div>
</a>
</div>
Enlevez l'espace avant: survolez et: avant
Vous êtes également susceptible de courir dans un monde de blessures avec le symbole
", utilisez la parenthèse standard plutôt que" , c'est-à-dire Salut paulie_d, merci, mais cela n'a pas fonctionné. Rien ne se passe alors.
Bonjour EGC, ils sont corrects dans le code réel, je suppose qu'une question de coupe et de pâte, lorsque je mets le code sur cette page.
Nous aurons besoin d'une explication beaucoup plus claire de ce que vous voulez arriver + bien besoin d'un exemple de reproductible minimal-reproductible Stackoverflow.com/help / Exemple minimal-reproductible / - Si nous allons aider. Voici un début: jsfiddle.net/sheriffDerek/48u02ebf
Salut shérifderek, jsfiddle.net/8etJPGYB/5 , vous aurez l'idée ... Vous pouvez voir, le cercle orange arrive lorsque vous souris sur le fond de la div ... c'est ce que j'essaie d'empêcher? Cela se produit sur l'image, ce qui est bon.
Comme je l'ai dit, vous devez bien l'expliquer. "Code fonctionne ... mais ne fonctionne pas, sauf ..." - n'est pas un contour évident de l'effet souhaité / même lorsque je vois votre exemple.
Si quelque chose est un descendant (à l'intérieur de) le parent ... ça va déclencher la survolte. Vous pouvez essayer d'utiliser des événements pointeurs non - mais il est beaucoup plus probable que la plupart de ce que vous faites - doit être fait correctement. Un nom de classe "Affichage" ou "conteneur" - est le premier problème. Vous aurez besoin de buts de nommage plus clair et plus clair.
Vrai, mais dans l'OP, pourquoi n'est-ce pas suffisamment d'image de conteneur pour spécifier quand activer le vol stationnaire? Merci