WebDev For You - Daily Interaction #122

Welcome to Daily Interaction #122. This demo showcases a category card animation on hover. For this effect two solid bars appear above and below the image, and a color overlay with text appears as well. The effect was achieved by setting the category card wrapper to an overflow of hidden and to a flex setting of align stretch and justify space between. This places the two added div blocks at the top and bottom of the category card wrapper. Then a height of 20% was applied to each div block. Also a div block with a color and text was add to the category card wrapper. Within interactions the top and bottom block were moved out of the wrapper, and the color overlay with text was set to an opacity to 0%. Then the top and bottom div blocks come back in and the color overlay with text is set to an opacity of 100% to come back in. Inspired by: https://codepen.io/littlesnippets/pen/jyKOEx To view more daily interactions and premium content visit: https://www.webdevforyou.com/