HTML & CSS - Mastery / Visual Styling with CSS

CSS Transitions and Hover Effects

🧠 What are CSS Transitions?

CSS transitions allow you to smoothly change CSS properties over time, instead of instantly.

Example: A button can gradually change color or grow in size when hovered.

🔁 Basic Syntax

transition: property duration timing-function delay;

  • property: What to animate (e.g., background-color, transform)

  • duration: How long (e.g., 0.5s)

  • timing-function: Speed curve (ease, linear, ease-in-out, etc.)

  • delay: When to start (optional)

Example:

💁 For the above example,

On hover, .box5 smoothly increases its size (width * height) and changes background color in a single transition line over 0.3 seconds due to transition: all 0.3s ease-in-out;.

1. Color Change on Hover

➡️ Smooth color shift from blue to green when hovered.

2. Scale Up on Hover

➡️ Element gently grows when hovered for scale() properly.

3. Shadow Pop on Hover

➡️ Shadow appears smoothly on hover.

4. Text Color & Underline

➡️ On hover, the color changes from black to royal blue and a bottom border is added.

📊 Transition Cheat Table

Property

Use

all

Applies transition to all animatable properties

background-color

Color fade

transform

For scale, rotate, translate effects

box-shadow

Animate drop shadows

opacity

Fade in/out effect