Comment faire la transition des propriétés CSS 'affichage' + 'opacité'

Étape 2 : Définir la propriété 'display'

Ensuite, accédez au conteneur div en utilisant le nom de classe ' élément principal » et réglez le « afficher ' propriété:

Ici, la valeur du « afficher ' la propriété est définie comme ' bloc ” pour occuper toute la largeur de l'écran.

Étape 3 : Ajouter une image d'arrière-plan

Ensuite, appliquez les propriétés CSS suivantes sur le conteneur div accédé :

Dans l'extrait de code ci-dessus :

• ' hauteur ' et ' largeur ” Les propriétés déterminent la taille de l'élément défini.
• ' image de fond ' La propriété CSS est utilisée pour insérer une image à l'aide du ' URL() ” fonction à l'arrière de l'élément.
• ' opacité ” détermine le niveau d'opacité d'un élément. Le niveau d'opacité indique le niveau de transparence, où ' 1 ” est utilisé pour aucune transparence, et “ 0,5 ' est pour ' cinquante% ' transparence.
• ' transition ” en CSS permet aux utilisateurs de modifier les valeurs des propriétés en douceur sur une durée donnée.
• ' marge ” définit l'espace à l'extérieur de la limite définie autour d'un élément.

Sortir

Étape 4 : Appliquer le pseudo-sélecteur « :hover »

Maintenant, accédez au conteneur div le long du ' :flotter 'Pseudo sélecteur utilisé pour sélectionner des éléments lorsque nous passons la souris dessus :

Ensuite, réglez le ' opacité » de l'élément sélectionné comme « 1 ” pour supprimer la transparence.

Sortir

Il s'agit de définir les propriétés 'affichage' et 'opacité' CSS de transition.

Conclusion

Pour définir les propriétés 'affichage' et 'opacité' de la transition, commencez par créer un conteneur div en utilisant l'élément