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)

Focus on how CSS transitions animate changes you make in a hover state. When the image’s height and width are set to 300px on hover and there’s a transition defined for those properties with a 3-second duration, the browser doesn’t snap to 300px. It tracks the change and grows smoothly from the current size to 300px over three seconds. That gradual growth is precisely what a transition does, so the result is the image enlarging to 300px by 300px over three seconds on hover. For this to happen, the initial size must differ from 300px and the transition must be declared for height and width (or for all properties). If the transition weren’t set or the duration were 0, the change would happen instantly.