CSS Animation and Hover Practical

1. Make a square: size is 300x300 pixels, use any color for its background.
It has to be positioned 50 pixels from the top of the browser and 50 pixels from the left.
2. Make the second square with another background color. Position it so it partially covers the first square. Its upper left corner has to be exactly in the center of the first square (use positioning properties).
3. Make the second square around 70% transparent.
(If you work with Dreamweaver, it might not show opacity with design view)

ANIMATION PART:
Make the second box gradually change its color to yellow on its own and then back to the original one (duration - several seconds; iteration – infinite).

HOVER PART:
Make the second square rotate 360 degrees around its center on mouse over.

Note: you are absolutely welcome to use any sources available