[SOLVED] Lightbox Video Thumbnail Play on Hover

[Noel_Fenez]

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!

[Noel_Fenez]

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!