justinjsloan Posted February 27, 2022 Share Posted February 27, 2022 Site URL: https://www.justinjsloan.com Hello, I was hoping to have help with adding hover over text to my website. I have a gallery of GIFs that I would like the names of to fade on when hovered on. My website is https://www.justinjsloan.com Thanks so much for your help. Link to comment
tuanphan Posted March 2, 2022 Share Posted March 2, 2022 (edited) On 2/28/2022 at 6:42 AM, justinjsloan said: Site URL: https://www.justinjsloan.com Hello, I was hoping to have help with adding hover over text to my website. I have a gallery of GIFs that I would like the names of to fade on when hovered on. My website is https://www.justinjsloan.com Thanks so much for your help. You want When hover gif >> show text over gif?? Is this right If yes, can you add some text? then we can give code to show it over image easier Edited March 2, 2022 by tuanphan 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
justinjsloan Posted March 4, 2022 Author Share Posted March 4, 2022 Hi Tuanphan, That is correct! If the text could reveal by fade on the bottom of the gif that would be perfect. I added the gif titles to the page, would that suffice for what you need? Thanks so much. Link to comment
tuanphan Posted March 8, 2022 Share Posted March 8, 2022 On 3/5/2022 at 3:40 AM, justinjsloan said: Hi Tuanphan, That is correct! If the text could reveal by fade on the bottom of the gif that would be perfect. I added the gif titles to the page, would that suffice for what you need? Thanks so much. Add this to Design > Custom CSS /* Show title on hover */ .slide a:after { position: absolute; content: ""; background: rgba(0,0,0,0.5); z-index: 999; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: all 0.5s; pointer-events: none; } .slide a { position: relative; } .slide a { position: relative; opacity: 1 !important; } .slide:hover a:after { opacity: 1; } .image-slide-title { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; text-align: center; color: white; opacity: 0; z-index: 1000; transition: all 0.5s; pointer-events: none; } .slide:hover .image-slide-title { opacity: 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
justinjsloan Posted March 9, 2022 Author Share Posted March 9, 2022 Hi Tuanphan, That worked. Thank you so much for the help! tuanphan 1 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