Liliana Posted January 9, 2020 Share Posted January 9, 2020 Hi there! I wondering is it's possible to have a GIF appear when someone hover over an image link to a page? I have gifs right now as thumbnails but it feels like a bit much as I add more projects. So I'd like it to be a still image until you hover over to click on a project. https://www.lilianapenagos.com/ for reference. Thank you all! Link to comment
Colemance Posted January 20, 2020 Share Posted January 20, 2020 Is this the York Template? because I have the same exact question with my website and wanting a preview of films via GIFs before viewers click. coletypical.com Link to comment
invisiblenorth Posted January 30, 2020 Share Posted January 30, 2020 Replying because I have the same question as well. Link to comment
Webswool Posted July 7, 2020 Share Posted July 7, 2020 Hi, I've used the following to create a logo image that only moves when the viewer hovers over the image: (I inserted my still image as an image block and then entered this code in the custom CSS editor) //Creating the gif image .sqs-image .sqs-image-content::after { background-image: url('https://ADD THE URL OF YOUR UPLOADED GIF HERE.gif'); background-position: absolute; background-repeat: no-repeat; background-size: 100%; content: ''; height: 100%; opacity: 0; position: absolute; left: 0; top: 0; width: 100%; } //Hover mode .sqs-image .sqs-image-content:hover img { opacity: 0; } .sqs-image .sqs-image-content:hover::after { opacity: 1; } So in your case you'd need to upload the thumbnail/still image for each, then target these when applying the code one by one so that each of your gifs is attached to a specific image block. (replace .sqs-image .sqs-image-content each time for the #id) Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.