WebDev For You - Daily Interaction #85

Welcome to daily interaction #85. This demo showcases a product card animation on hover. With this interaction I just have a caption appear to the lower right of the title of each card. I think it's a nice way to showcase more information about a product. I added an arrow to the caption on hover to signify a call to action, letting the user know that if they click they will be taken to another page. Both the title and the caption are in a wrapper. This way I was able to set a position of absolute to both the title and the caption. I then moved the caption 50% down and 50% to the right of the title. This way the caption doesn't start appearing in the same location as the title - it is more offset in the center. I also moved the entire wrapper up 10 pixels to the left and top, so as the caption comes in everything moves to the upper left just a bit. These cards were inspired by these hover effects here: https://tympanus.net/Development/HoverEffectIdeas/