Transition + Transform
Hover over the Blue div element below:
In this example the square is rotating 180 degreese.
In this example the circle contains 4 colors and is rotating 180 degreese and becoming a frame.
In this example the hover effect is expanding both sides, using a easing-function called cubic-bezier
In this example the hover effect is expanding the square fully in 8 steps
Change shape with :hover
Hover over the Square to change the shape to a Circle below:
:Hover + Transition
Hover over the Picture to see what hides behind it