jmmddn Posted June 24, 2020 Share Posted June 24, 2020 Site URL: http://www.jimmadden.ca/motiongraphics Hello all, First time asking on here, but I cant for the life of me figure this one out. I have a page of gifs I have converted from .mov files to show some animation, but there is so many of them I would ideally like to have a static image (possibly with text about the client or something) then when you hover over each one, have that gif animation start. I feel like this would help speed up the browsing experience on this page, any help on this would be greatly appreciated! Using the Jasper Template. - Jim Link to comment
rwp Posted June 24, 2020 Share Posted June 24, 2020 You will need to find the block- ID for each image, and do this. You will also need a static and dynamic image uploaded in the files and to link them in the code. So the last 2 blocks of code will need to be repeated 20 times for 20 images, changing the block- ID .thumb-image.loaded { display: none; } #block-yui_3_17_2_1_1592964324330_57866 .image-block-wrapper.has-aspect-ratio { background: url("STATIC IMAGE"); } #block-yui_3_17_2_1_1592964324330_57866 .image-block-wrapper.has-aspect-ratio:hover { background: url("PLAYING IMAGE"); } Link to comment
jsaroufim Posted March 16, 2022 Share Posted March 16, 2022 @rwp Do you have code for how to do this when the images are within a summary block? I have added a summary block of gallery images to my site, and I would like each individual photo to have a custom gif on hover. I know how to find the block ID, but I cannot figure out how to customize each photo with its own animated rollover. I would like to continue using the summary block for best formatting. Thank you so much! Link to comment
tuanphan Posted March 19, 2022 Share Posted March 19, 2022 On 3/17/2022 at 3:59 AM, jsaroufim said: @rwp Do you have code for how to do this when the images are within a summary block? I have added a summary block of gallery images to my site, and I would like each individual photo to have a custom gif on hover. I know how to find the block ID, but I cannot figure out how to customize each photo with its own animated rollover. I would like to continue using the summary block for best formatting. Thank you so much! Try this code #block-id .summary-item:nth-child(1):hover img { content: url(https://cdn.pixabay.com/photo/2022/03/06/05/30/clouds-7050884__480.jpg); } #block-id .summary-item:nth-child(2):hover img { content: url(https://cdn.pixabay.com/photo/2022/02/15/00/40/lemonade-7014122__340.jpg); } #block-id .summary-item:nth-child(3):hover img { content: url(https://cdn.pixabay.com/photo/2022/03/01/20/58/peace-genius-7042013__340.jpg); } If it doesn't work, Can you share link to page where you added summary? We can give the code to achieve this. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment