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

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)

This emphasizes how CSS transitions animate size changes when you hover over an element. If the image starts at a smaller size (for example 150px by 150px) and the CSS applies a transition to both height and width with a 3-second duration, then on hover the height and width are changed to 300px each. The browser animates those changes smoothly over three seconds, so you see the image grow gradually to a 300px by 300px square as long as the pointer remains over it. This is why growing both dimensions over a set duration matches the described behavior. It wouldn’t be a rotation, since rotation would require a transform, not a change in height and width. It also wouldn’t leave the size unchanged, because the hover rule explicitly changes the dimensions. And it wouldn’t change only height while keeping width the same, unless the hover rule targeted only height, which isn’t indicated by the described scenario.

This emphasizes how CSS transitions animate size changes when you hover over an element. If the image starts at a smaller size (for example 150px by 150px) and the CSS applies a transition to both height and width with a 3-second duration, then on hover the height and width are changed to 300px each. The browser animates those changes smoothly over three seconds, so you see the image grow gradually to a 300px by 300px square as long as the pointer remains over it.

This is why growing both dimensions over a set duration matches the described behavior. It wouldn’t be a rotation, since rotation would require a transform, not a change in height and width. It also wouldn’t leave the size unchanged, because the hover rule explicitly changes the dimensions. And it wouldn’t change only height while keeping width the same, unless the hover rule targeted only height, which isn’t indicated by the described scenario.