1 pièce(s) jointe(s)
Insérer plusieurs animations css dans un article
Bonjour,
Alors j'espère pouvoir bien faire comprendre ma problématique.
Je souhaite faire apparaitre une animation à droite du container (=un background qui s'agrandit horizontalement au survol avec un rotate de l'icon).
Je souhaite faire apparaître le check avec son background au survol de l'article. Poussant l'élément .element-price vers la gauche .
Mais au survol de la souris ça ne s'affiche pas, je suis obligé de cliqué.
Mais mon code ne fonctionne pas.
Je pense que je choisi mal l'élement car, le hover doit se faire dans la globalité de l'article, alors que l'animation au hover se produit seulement si je suis dans ma classe .element-price.
Je suis junior, et en plein apprentissage, d’où mon incompréhension :oops:
Vos explications ou pistes seront très utiles.
Merci de votre aide.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| .element-price {
transition: 1s linear 0s;
}
.element-price::after {
content: "\f058";
font-family: "Font Awesome 5 Free";
font-size: 1.5em;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: -1em;
right: -1em;
height: 100%;
border-radius: 0em 1em 1em 0em;
opacity: 0;
background-color: var(--color-tertiary);
transition: 1s linear 0s;
}
.element-price:hover {
text-indent: -30px;
}
.element-price:hover::after {
opacity: 1;
text-indent: 0px;
} |
Code:
1
2
3
4
5
6
7
| <article class="article-second-page">
<div class="text-item">
<h4>Une escapade en Italie</h4>
<p class="Explain">Hôtel premium</p>
<div class="element-price">35€</div>
</div>
</article> |
Pièce jointe 598444Pièce jointe 598447
Rectification du code html de la balise i
J'ai revu déjà ma structure html qui n'était pas bonne.
Et rajouté une class directement dans la balise du i .
Code:
1
2
3
4
5
6
7
8
| <article class="article-second-page">
<div class="text-item">
<h4>Une escapade en Italie</h4>
<p class="Explain">Hôtel premium</p>
<div class="element-price">35€</div>
<div><i class="fas fa-check-circle check"></i></div>
</article> |
Insérer plusieurs animations css dans un article
Oui, et tout fonctionnement correctement maintenant que j'ai choisi directement la balise article, plus qu'a faire les animation avec transition et tranforme pour faire grossir l'élémenet horizontalement. ;)
Je vais réussir, merci pour le retour.
