A few days ago I was asked to update the layout of the website for a store I used to work at.
I thought this was a good chance to get to know jQuery animations, so I put together a bunch of stock images as background, edited pictures of frames and put some text in the frames for the icons.
I worked with artboards in Affinity Designer so I could export multiple images to different files, I also worked with groups and a transparent background so I could make .png files of the frames and put them on top of the background images.
That way I used the background-image css property, with display set to block and could superimpose a png with transparency over another image.
With jQuery I selected all images, where each image has a class “RT” and I used the reserved word this to select the particular instance for mouseover and mouseleave events.
With this I managed to make a fun little menu where the frame with the text grows and shrinks according to mouse-events.