In the given CSS snippet, which option correctly describes what happens on hover to the image?

In the given CSS snippet, which option correctly describes what happens on hover to the image?

• A. The image scales instantly to 300px
• B. The height and width increase to 300px with a 3-second transition
• C. Only the height changes
• D. The height and width will gradually increase to 300px over a 3-second duration

Answer: (D)

The key idea is CSS transitions: when you change a property that has a transition defined, the browser animates that change over the specified duration. If, on hover, height and width are both changed to 300px and a transition of 3 seconds is set for those properties, the image will smoothly grow in both dimensions from its current size to 300px over three seconds. That gradual, time-based change is exactly what option describes—both height and width transitioning together to 300px within a 3-second duration. The other options describe instant changes or only one dimension changing, which wouldn’t match the behavior produced by a proper height and width transition on hover.