Using these styles, what will occur when a user hovers over an image on the page?

• A. The image's height and width will remain the same
• B. The image's height and width will gradually increase to 300 pixels over a 3-second time period.
• C. The image's height will increase to 300px while width remains 150px
• D. The image will rotate 180 degrees

Answer: (B)

Hover-triggered CSS transitions animate changes to properties that have a transition defined. In this case, when the mouse is over the image, both height and width are changed to 300px and those properties have a 3-second transition applied. The browser smooths the change, so the image gradually grows to 300x300 over three seconds rather than jumping instantly. It’s not a rotation or a no-change scenario because the rules explicitly modify the size and request a duration for that animation. If only one dimension changed or there were no transitions, you’d see a different, less gradual result.