FLCJasp Posted April 30, 2020 Share Posted April 30, 2020 (edited) Site URL: http://francisleclerc.com Hello! I would like to change the hover effect on the homepage images for my website which is using the Jasper template. I would like for the images to change to a single color when hovering over. Each images would have a different color. If anyone could help it would be greatly appreciated! Thank you! Edited April 30, 2020 by FLCJasp Link to comment
tuanphan Posted April 30, 2020 Share Posted April 30, 2020 Add to Home > Design > Custom CSS a.index-item-link.intrinsic:after { content: ""; position: absolute; background: red; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; opacity: 0; } a.index-item-link.intrinsic:hover:after { opacity: 1; } FLCJasp 1 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
FLCJasp Posted May 2, 2020 Author Share Posted May 2, 2020 (edited) Hello, Thank you very much for the code. Is there a way to affect only one image? Thanks. Edited May 2, 2020 by FLCJasp Link to comment
tuanphan Posted May 5, 2020 Share Posted May 5, 2020 On 5/3/2020 at 6:16 AM, FLCJasp said: Hello, Thank you very much for the code. Is there a way to affect only one image? Thanks. Which image? 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
FLCJasp Posted May 5, 2020 Author Share Posted May 5, 2020 Hi, sorry I wasn't clear. Let say my index page has 9 pages/thumbnail images. The code you've given me affect the hover of all 9 images. Would it be possible to only affect one? The first thumbnail would be red when hovered, the second green, etc. Thanks. Link to comment
tuanphan Posted May 6, 2020 Share Posted May 6, 2020 15 hours ago, FLCJasp said: Hi, sorry I wasn't clear. Let say my index page has 9 pages/thumbnail images. The code you've given me affect the hover of all 9 images. Would it be possible to only affect one? The first thumbnail would be red when hovered, the second green, etc. Thanks. .index-section:nth-child(1) a.index-item-link.intrinsic:after { content: ""; position: absolute; background: red; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; opacity: 0; } .index-section:nth-child(1) a.index-item-link.intrinsic:hover:after { opacity: 1; } .index-section:nth-child(2) a.index-item-link.intrinsic:after { content: ""; position: absolute; background: green; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; opacity: 0; } .index-section:nth-child(2) a.index-item-link.intrinsic:hover:after { opacity: 1; } .index-section:nth-child(3) a.index-item-link.intrinsic:after { content: ""; position: absolute; background: gray; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; opacity: 0; } .index-section:nth-child(3) a.index-item-link.intrinsic:hover:after { opacity: 1; } Repeat for other items FLCJasp 1 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
FLCJasp Posted May 6, 2020 Author Share Posted May 6, 2020 (edited) Man, that's exactly what I wanted. thanks a lot. Edited May 6, 2020 by FLCJasp Link to comment
debbie-lee Posted March 2, 2021 Share Posted March 2, 2021 I'm using the same exact Jasper template but when I put the CSS code in, my gallery images still do not activate the hover. Can someone help me out on this? Link to comment
tuanphan Posted March 6, 2021 Share Posted March 6, 2021 On 3/3/2021 at 5:50 AM, debbie-lee said: I'm using the same exact Jasper template but when I put the CSS code in, my gallery images still do not activate the hover. Can someone help me out on this? Hi. Can you share link to your site? We can check easier 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