WebDev For You - Daily Interaction #121

Welcome to Daily Interaction #121. This demo showcases a project card animation on hover. When hovering over the image a card with the title, author, and view project button appear from the upper left above the image. The effect was achieved by placing a div block inside of the project card wrapper. In interactions the div block was set to an opacity of 0% initially. Then on hover the div block moves to the lower right and the opacity changes to 100%. On hover out the div block returns to its original position and the opacity changes to 0%. Inspired by the project card here: https://tympanus.net/Tutorials/CaptionHoverEffects/index.html To view more daily interactions and premium content visit: https://www.webdevforyou.com/