Streaming live at 10am (PST)

[SOLVED] Lightbox Video Thumbnail Play on Hover

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: https://sandwich.co/work/category/featured

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!

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
Screen Shot 2020-03-26 at 12.32.19 PM

Then set that image as Position: Absolute for it to cover the current thumbnail.
Screen Shot 2020-03-26 at 12.34.04 PM

Then all that is left is bring you Opacity to 0, then on Hover bring the opacity to 100%.
Screen Shot 2020-03-26 at 12.34.24 PM

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!