WebDev%20For%20You%20-%20Daily%20Interaction%20%23124 - by WebDev%20For%20You
Created on Fri May 17 2019 03:59:21 GMT+0000 (Coordinated Universal Time)
This responsive website has 346 views, 0 comments, and 9 likes.
Welcome%20to%20Daily%20Interaction%20%23124.%0A%0AThis%20demo%20showcases%20a%20category%20card%20animation%20on%20hover.%0A%0AWith%20this%20effect%20lines%20scale%20in%20from%20the%20top-left%20and%20bottom%20right%20around%20the%20image.%20There%20are%20two%20blocks%20around%20the%20image%20and%20the%20lines%20for%20each%20block%20start%20animating%20at%20opposite%20angles%20to%20create%20an%20interesting%20line%20effect%20around%20the%20image.%0A%0AThe%20effect%20was%20achieved%20by%20placing%20two%20absolute%20div%20blocks%20inside%20of%20the%20card%20wrapper%20and%20then%20moving%20the%20first%20div%20block%20a%20bit%20to%20the%20upper%20left%2C%20and%20the%20second%20div%20block%20towards%20the%20bottom%20right.%20Then%20in%20the%20absolute%20div%20blocks%204%20div%20blocks%20were%20added%20to%20represent%20the%20lines.%20The%20lines%20have%20a%20size%20of%201%20px%2C%20and%20were%20placed%20on%20each%20side%20of%20the%20div%20block.%20I%20changed%20the%20transform-origin%20for%20each%20line%20to%20make%20sure%20it%20scaled%20in%20from%20the%20correct%20place.%20In%20interactions%20I%20started%20each%20line%20at%20a%20scale%20of%200%20and%20then%20scaled%20it%20back%20to%201.%0A%0AInspired%20by%3A%20https%3A//codepen.io/littlesnippets/pen/XXKwxM
Visit http://webdev-for-you-daily-interaction-124.webflow.io
