Create an image-gallery

Exercise to practice transitions

Challenge

• Create an image gallery as in the picture below.
• On hover images should move back to their original position and get their color back

usefull CSS properties for this exercise

position: relative;
transform: rotate(deg);
transition: [transition-property] [transition-duration] [transition-timing-function];
filter: grayscale(amount)
:hover
z-index

position: relative; element is positioned relative to its normal position.
transform applies a 2D or 3D transformation to an element
rotate() method rotates an element clockwise or counter-clockwise, depending on degrees setting
transitions allows you to change property values smoothly, over a given duration.
filterproperty applies graphical effects like blur or color shift to an element.
grayscale(amount)converts the input image to grayscale. The value of amount defines the proportion of the conversion. A value of 100% is completely grayscale.
hover triggered when the user hovers over an element
z-index property specifies the stack order of an element.