WebDev For You - Daily Interaction #124

Welcome to Daily Interaction #124. This demo showcases a category card animation on hover. With this effect lines scale in from the top-left and bottom right around the image. There are two blocks around the image and the lines for each block start animating at opposite angles to create an interesting line effect around the image. The effect was achieved by placing two absolute div blocks inside of the card wrapper and then moving the first div block a bit to the upper left, and the second div block towards the bottom right. Then in the absolute div blocks 4 div blocks were added to represent the lines. The lines have a size of 1 px, and were placed on each side of the div block. I changed the transform-origin for each line to make sure it scaled in from the correct place. In interactions I started each line at a scale of 0 and then scaled it back to 1. Inspired by: https://codepen.io/littlesnippets/pen/XXKwxM