WebDev For You - Daily Interaction #129

Welcome to Daily Interaction #129. This demo showcases a 180° project card animation on hover and click. With this effect stars scale in and out behind the image. Also on mouse move the image moves around the card. When you click on the card the card rotate 180 degrees to reveal the more information. For the stars I created a 6x8 grid of 50x50 blocks and added two div blocks inside to create the cross. Then in interactions I have them rotate, scale, and loop on hover. On hover out the crosses go back to their original size and stop rotating. For the image moving I added a mouse move over element interaction and just moved the image 20px to each side as the mouse moved around the card. On click I added a rotation to the card, so I made sure to place the card in a 3d-wrapper and added child perspective to it. Then inside of the card wrapper I added a front and back div to represent the front and back of the card.