Bonjour a tous,
je rencontre un problème lorsque je reproduis le tutoriel css de creation de card UI.
la pastille "photo" ne suit pas la boite de texte lors de l'animation. j'ai essaye plusieurs choses mais rien ne fonctionne, je vous montre mon code HTML et CSS.
(désolé pour les accents j'écris sur un clavier qwerty japonais).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles.css" rel="stylesheet">
<title>Document</title>
<Link rel="icon" href="favicon.ico">
<title>Card UI</title>
</head>
<body>
<article class="card">
<div class="card-picture">
<img src="image-product-mobile.jpg">
</div>
<div class="card-date">
<span class="card-date-day">12</span>
<span class="card-date-month">Mai</span>
</div>
<div class="card-body"></div>
<div class="category"><a href="#">photos</a></div>
<div class="card-title">title-titre</div>
<div class="card-sub">subtitle</div>
<p class="card-description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste quas illum accusantium deserunt ex, earum dolor quisquam beatae atque minus fugiat officiis veritatis magnam voluptates architecto, esse nisi consequuntur quae!
Molestiae doloribus nostrum voluptas exercitationem minus dolorum sapiente voluptate nisi, eos nobis magni, laborum nemo aut deleniti natus! Voluptatem amet corporis, nihil id aliquid molestiae at est provident. Optio, adipisci.
Eos iste assumenda veritatis atque, consequuntur excepturi corrupti quod optio animi soluta magnam cumque modi. Nulla consectetur accusamus aliquam fugiat et. Ea totam ipsum fugit consectetur dolorum id deserunt labore.
</p>
<footer class="card-footer">
<span class="icon-time">6min</span>
<span class="icon-comment"><a href="#">30 comments</a></span>
</footer>
</article>
</body>
</html>Pour le CSS
* {
box-sizing: border-box;
}
body {
font-family: 'Franklin Gothic Medium', Arial, sans-serif;
font-size: 16px;
background-color: rgb(213, 240, 255);
line-height: 1.4;
}
.card {
/* positionne la card au milieu de l'ecran*/
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%) translateZ(0px);
/*le fait de mettre le background d'une autre couleur
permet de faire resortir la card*/
background-color: rgb(233, 255, 255);
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.4);
/*on va donner une transition a notre box-shadow */
transition: box-shadow 0.3s;
/*on veut cacher ce qui resort de la carte*/
overflow: hidden;
}
a {
color: inherit;
text-decoration: none;
}
/*je vais donner un effet d'ccentuation de l'ombre quand je vais passer dessus */
.card:hover {
box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.7);
}
/*on va positionner la date dans une pastille en haut a droite de la carte*/
.card-date {
position: absolute;
top: 20px;
right: 20px;
width: 45px;
height: 45px;
/*pour creer la pastille il faut mettre un background color*/
background-color: rgb(10, 219, 219);
border-radius: 50%;
text-align: center;
color: rgb(60, 18, 18);
line-height: 13px;
font-weight: bold;
/*on remarque que le texte est trop haut, on joue avec le padding*/
padding-top: 10px;
}
.card-date-day {
/*on va s'assurer que day et month soit toujours empiler l'un sur l'autre en utilisant
un display: block pour chacune des selecteurs (day et month)*/
display: block;
font-size: 14px;
}
.card-date-month {
display: block;
/* pour les tailles de polices on tatonne en fonction du modele si on a pas le psd (figma form)*/
font-size: 10px;
/*on va forcer le mode majuscule*/
text-transform: uppercase;
}
.card-picture {
/*on va preparer une transition pour que le text passe sur l'image
au moment ou l'on passe dessus*/
/* height: 235px; cette ligne pose probleme, le texte est sur l'image*/
/*on met le fond en noir car ca s'obscurci lorsque l'on passe dessus*/
background-color: black;
transition: height 0.3s;
overflow: hidden;
height: 235px;
}
.card-picture img {
width: 100%; /* Assure que l'image prend toute la largeur */
height: 100%; /* S'assure qu'elle prend toute la hauteur */
object-fit: cover; /* Évite les déformations */
}
img {
/*on securise l'allignement de l'image*/
display: block;
opacity: 1;
/*le transform va permettre de donner un effet
aussi bien au texte qu'a l'image*/
transition: opacity 0.3s transform 0.3s;
transform: scale(1)
}
.card:hover .card-picture img {
opacity: 0.6;
}
/*on veut que le texte glisse sur l'image vers le haut*/
.card:hover img {
opacity: 0.6;
/*on va donner un leger effet de zoom a l'image
lorsque l'on passe dessus*/
transform: scale(1.2);
}
.card:hover {
height: auto;
}
.card:hover .card-picture {
height: 90px; /* Diminue la hauteur pour laisser la place au texte */
}
/*pour le body on veux faire resortir "photo"
comme si c'etait un post it en decalage avec le reste*/
.card-body {
position: relative;
padding: 20px;
}
.category {
/*il s'agit d'un petit bloc donc on le place en absolute*/
position: absolute;
/*on positionne le texte*/
left: 0;
top: 210px;
/*on ne met pas de largeur car elle dependra du texte*/
height: 25px;
padding: 0 15px;
background-color: rgb(10, 219, 219);
/*on stilyse le texte*/
color: rgb(64, 2, 2);
/*on va centrer le texte verticalement*/
line-height: 25px;
text-transform: uppercase;
transition: top 0.3s ease;
}
.card-title {
margin: 0;
padding: 0 0 10px 0px;
font-size: 22px;
color: black;
font-weight: bold;
}
.card-sub {
margin: 0;
padding: 0 0 10px 0;
color: rgb(10, 219, 219);
font-size: 19px;
}
.card-description {
color:grey;
font-size:14px;
line-height: 27px;
/*on va camoufler le texte pour
qu'il ne soit visible que lorsque la card est ferme */
}
.card-footer {
/*on le colle en bas avec la position absolute,
sauf que le footer est ecrase dans le texte donc on
passe sur position relative */
position: relative;
bottom: 20px;
left: 20px;
right: 20px;
font-size: 11px;
color: rgb(66, 78, 78);
/*on fait respirer le texte*/
margin-top: 20px;
}
.icon{
display: inline-block;
vertical-align: middle;
}
.icon-comment {
/* background: url(j'en ai pas c'est pas grave);*/
width: 14px;
height: 14px;
margin-top: -2px;
margin-left: 12px;
}
.icon-time {
/* background: url(j'en ai pas c'est pas grave);*/
width: 10px;
height: 17px;
margin-top: -3px;
}Vous remerciant par avance.
2 réponses
Il semble que votre problème soit lié à la façon dont vous positionnez et animez les éléments dans votre carte, notamment la pastille "photo" qui ne suit pas bien le texte lors de l'animation. Pour résoudre ce problème, voici quelques suggestions :
-
Positionner correctement la pastille "photo" : Assurez-vous que la pastille soit positionnée par rapport à son conteneur (
.card-date). Utilisezposition: absolutepour que cette pastille se déplace en fonction du conteneur, et définissez un positionnement relatif pour la carte elle-même si ce n'est pas déjà fait. -
Corriger les animations et transitions : Les animations doivent être appliquées aux éléments correspondants tout en tenant compte de leur positionnement. Par exemple, vous devez veiller à ce que l'élément
.card-picturese réajuste correctement à la hauteur réduite lorsque vous animez l'image au survol.
Voici quelques corrections dans le CSS qui pourraient améliorer la synchronisation de la pastille "photo" et du texte, et également corriger le comportement lors de l'animation.
CSS mis à jour :
* {
box-sizing: border-box;
}
body {
font-family: 'Franklin Gothic Medium', Arial, sans-serif;
font-size: 16px;
background-color: rgb(213, 240, 255);
line-height: 1.4;
}
.card {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
background-color: rgb(233, 255, 255);
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.4);
transition: box-shadow 0.3s;
overflow: hidden;
}
.card:hover {
box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.7);
}
/* Correct positioning and size of the date circle */
.card-date {
position: absolute;
top: 20px;
right: 20px;
width: 45px;
height: 45px;
background-color: rgb(10, 219, 219);
border-radius: 50%;
text-align: center;
color: rgb(60, 18, 18);
line-height: 13px;
font-weight: bold;
padding-top: 10px;
z-index: 2; /* Ensure it's above other elements */
}
.card-date-day, .card-date-month {
display: block;
}
.card-date-day {
font-size: 14px;
}
.card-date-month {
font-size: 10px;
text-transform: uppercase;
}
.card-picture {
background-color: black;
transition: height 0.3s;
overflow: hidden;
height: 235px;
}
.card-picture img {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.3s, transform 0.3s;
}
/* Card hover effect */
.card:hover .card-picture {
height: 90px;
}
.card:hover .card-picture img {
opacity: 0.6;
transform: scale(1.2);
}
/* Adjust text and other content */
.card-body {
position: relative;
padding: 20px;
}
.category {
position: absolute;
top: 210px;
left: 0;
height: 25px;
padding: 0 15px;
background-color: rgb(10, 219, 219);
color: rgb(64, 2, 2);
line-height: 25px;
text-transform: uppercase;
transition: top 0.3s ease;
}
.card-title {
margin: 0;
padding: 0 0 10px 0;
font-size: 22px;
color: black;
font-weight: bold;
}
.card-sub {
margin: 0;
padding: 0 0 10px 0;
color: rgb(10, 219, 219);
font-size: 19px;
}
.card-description {
color: grey;
font-size: 14px;
line-height: 27px;
}
.card-footer {
position: relative;
bottom: 20px;
left: 20px;
right: 20px;
font-size: 11px;
color: rgb(66, 78, 78);
margin-top: 20px;
}
.icon-time {
width: 10px;
height: 17px;
margin-top: -3px;
}
.icon-comment {
width: 14px;
height: 14px;
margin-top: -2px;
margin-left: 12px;
}
Je vous remercie de votre reponse, je vais essayer de le refaire en tenant compte de votre correction.