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/