WebDev%20For%20You%20-%20Daily%20Interaction%20%23122 - by WebDev%20For%20You
Created on Wed May 15 2019 01:06:51 GMT+0000 (Coordinated Universal Time)
This responsive website has 300 views, 0 comments, and 4 likes.
Welcome%20to%20Daily%20Interaction%20%23122.%0A%0AThis%20demo%20showcases%20a%20category%20card%20animation%20on%20hover.%0A%0AFor%20this%20effect%20two%20solid%20bars%20appear%20above%20and%20below%20the%20image%2C%20and%20a%20color%20overlay%20with%20text%20appears%20as%20well.%0A%0AThe%20effect%20was%20achieved%20by%20setting%20the%20category%20card%20wrapper%20to%20an%20overflow%20of%20hidden%20and%20to%20a%20flex%20setting%20of%20align%20stretch%20and%20justify%20space%20between.%20This%20places%20the%20two%20added%20div%20blocks%20at%20the%20top%20and%20bottom%20of%20the%20category%20card%20wrapper.%20Then%20a%20height%20of%2020%25%20was%20applied%20to%20each%20div%20block.%20Also%20a%20div%20block%20with%20a%20color%20and%20text%20was%20add%20to%20the%20category%20card%20wrapper.%0A%0AWithin%20interactions%20the%20top%20and%20bottom%20block%20were%20moved%20out%20of%20the%20wrapper%2C%20and%20the%20color%20overlay%20with%20text%20was%20set%20to%20an%20opacity%20to%200%25.%20Then%20the%20top%20and%20bottom%20div%20blocks%20come%20back%20in%20and%20the%20color%20overlay%20with%20text%20is%20set%20to%20an%20opacity%20of%20100%25%20to%20come%20back%20in.%0A%0AInspired%20by%3A%20https%3A//codepen.io/littlesnippets/pen/jyKOEx%0A%0ATo%20view%20more%20daily%20interactions%20and%20premium%20content%20visit%3A%0Ahttps%3A//www.webdevforyou.com/
Visit http://webdev-for-you-daily-interaction-122.webflow.io
