CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3 Mise en œuvre de transformations CSS et effets de survol

Mise en œuvre de transformations CSS et effets de survol

Exemple de transformation
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre CSS 3
Revoir le teaser Je m'abonne
4,5
Transcription

89,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis
4,5
89,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Comprendre et appliquer les transformations CSS pour l'agrandissement d'image, apprendre à manipuler les transitions et les propriétés de bordure dans un contexte de mise en page web.

Découvrez comment agrandir une image au survol à l'aide de transformations CSS et des effets de transition.

Dans cette leçon, nous allons explorer l'usage des transformations CSS pour agrandir une image lors du survol de la souris, créant ainsi un effet de zoom. Nous débuterons par la mise en place d'une transformation via la propriété transform: scale pour créer l'effet d'agrandissement de 20%. Ensuite, nous intégrerons une transition de 0,3 secondes pour adoucir le changement de taille de l'image.

Nous verrons également comment repositionner et redimensionner les bordures à l'intérieur d'un div contenant l'article. Afin de masquer les débordements d'image hors de la boîte, nous utiliserons la propriété overflow: hidden. Enfin, nous corrigerons la position de notre calque de 10 à 0 pixels.

Ce tutoriel vous permettra de comprendre comment ajuster dynamiquement la taille d'une image et manipuler les propriétés CSS pour obtenir des effets visuels souvent utilisés sur les sites web modernes.

Voir plus
Questions réponses
Comment agrandir une image au survol avec CSS ?
En utilisant la propriété 'transform: scale' dans le pseudo-élément :hover, vous pouvez agrandir une image lorsque souris survol.
Pourquoi utiliser 'overflow: hidden' dans notre transformation ?
La propriété 'overflow: hidden' permet de masquer les parties de l'image qui débordent des limites fixées par la boîte parent, assurant ainsi un rendu propre et contrôlé.
Quelle est la durée appropriée pour une transition d'agrandissement d'image ?
Une durée de transition de 0,3 secondes est souvent appropriée car elle est suffisamment rapide pour être perceptible sans être trop brusque.

Programme détaillé

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 9 mois
La formation est divisée en 90 modules sans lien entre eux et sans progression pédagogique. Il faut les réorganiser par thème pour donner plus de cohérence et donner de la progression pédagogique à la formation. Multiples fautes d'orthographe dans les textes.
henridjithat
Il y a 1 an
Très bonne formation, étant débutant j'ai beaucoup appris.
yvan.vogel
Il y a 2 ans
J'en suis arrivé au bout.. Un vrai marathon. Très longue formation, à mon avis c'est plutôt 30h de cours et non pas 15h.
Après c'est une formation hyper claire et détaillée. L'auteur a fait un panorama complêt sur le CSS3.
g.vanleynseele
Il y a 4 ans
Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !