WebDev For You - Daily Interaction #126

Welcome to Daily Interaction #126. This demo showcases a profile card animation on hover. With this animation a circle comes in from the top, and the profile image scales down to reveal 2 borders behind the image. A div block comes in from the bottom as well to reveal social media icons, and the social media icons change color on hover. The effect was achieved by setting the overflow of the card wrapper to hidden, and moving the circle and bottom block out of the card wrapper within interactions. Then on hover they come back in. For the image I have it scale down in interactions, and another border appears behind the image. The image and border were placed in a div block with a blue background, that is why the image appears to have two borders around it. The blue color behind the image is also a bit darker to add a bit of contrast to the image section. Inspired by: https://codepen.io/FrankieDoodie/pen/NOJpVX