I’m stuck on how to implement a GIF on hover that can also be added through CMS…
I’m trying to replicate something similar to this: Work: Featured Work — Sandwich
To have an image change to another on hover, I would normally use two background images and hide one on hover which would work except I don’t see a way for this to be possible for the client to use a CMS collection.
I would like this to also work with a lightbox video link once clicked. Anyone have any ideas on how this could work?
Thanks in advance!
1 Like
After playing around I managed to solve the issue myself. Here is how I made it work:
Nest a second image in the Lightbox Link
Then set that image as Position: Absolute for it to cover the current thumbnail.
Then all that is left is bring you Opacity to 0, then on Hover bring the opacity to 100%.
This can work as usual with a CMS Collection as well, just need to link it as a regular image and then upload a GIF of the first few seconds of the video into the collection.
Voila, a CMS driven video grid that “auto-plays” on hover!
3 Likes