I was pleasantly surprised to find that it did still work, but I don't think I could achieve what I want without either a server side rendered image or maybe by doing something with SVGs.
Not impossible, but maybe not practical either... This is what I wanted to achieve:
Because it's a visually driven component, without some editorial work, the effect doesn't really work if I'm honest. The left and right items are too narrow and the middle one is just too tall. Enough to experiment with, but not practical enough to use. I wouldn't mind building a server side rendering tool but because it requires an editorial decision to be made, it's not for now.
I went ahead and created an example for what I wanted to build anyway over on CodePen. You can see that the individual areas of the image can be used to launch a different product page on Good Gear Club and if you hover, you should see a tool tip.
It was fun taking a trip down memory lane and working with an element I genuinely wouldn't have been surprised to find had been deprecated. Thankfully it lives on (and works in Safari for iOS!) and maybe I'll find a good use case for it soon.
|More from 1 Thing A Week|
|« Getting started with Apple's Freeform app||Apple unveils M1 Ultra||Wealth Inequality »|
You can find 1 Thing A Week on Twitter, Facebook, Instagram & Reddit