stefanosg Posted September 24, 2022 Posted September 24, 2022 (edited) Site URL: https://owl-bluebird-et6t.squarespace.com/rethymno I am trying to show my reels caption only on hover through CSS and have the caption be bigger like paragraph 1 size but I can't seem to make it work. password is 1234 here is an image of what I want it to look like (almost). I want the caption to be visible only for the image being currently hovered can anyone help Edited September 24, 2022 by stefanosg
tuanphan Posted September 24, 2022 Posted September 24, 2022 You mean Initial: hide title Hover: show title on top center of image + make caption bigger Is this right? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
tuanphan Posted October 15, 2022 Posted October 15, 2022 On 10/12/2022 at 5:20 PM, stefanosg said: yes exactly Can you add some captions first & enable gallery reel caption? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
alexgnz Posted July 19, 2023 Posted July 19, 2023 Hello! I am hoping you can help @tuanphan I have added this to create a nice dark hover over my reel galley. But how do I add different text to a specific image? Thank you! I know it is in content but this shows on every photos and I would like it centered and different for each one 🙂 Thank you again! Alex } /* Reel hover */ .gallery-reel .gallery-caption-reel { visibility: visible !important; top: 50% !important; margin: 0; transition: all 0.3s; z-index: 9999999; } figure:hover .gallery-caption-reel { opacity: 1 !important; transition: all 0.3s; } /* Overlay Color */ .gallery-reel-item-src:after { content: ""; background-color: rgba(0,0,0,0.75); position: absolute; top: 50; left: 50; width: 100%; height: 100%; z-index: 9999; opacity: 0; transition: all 0.3s; } figure:hover .gallery-reel-item-src:after { opacity: 100; transition: all 0.3s; }
tuanphan Posted July 22, 2023 Posted July 22, 2023 On 7/19/2023 at 8:04 AM, alexgnz said: Hello! I am hoping you can help @tuanphan I have added this to create a nice dark hover over my reel galley. But how do I add different text to a specific image? Thank you! I know it is in content but this shows on every photos and I would like it centered and different for each one 🙂 Thank you again! Alex } /* Reel hover */ .gallery-reel .gallery-caption-reel { visibility: visible !important; top: 50% !important; margin: 0; transition: all 0.3s; z-index: 9999999; } figure:hover .gallery-caption-reel { opacity: 1 !important; transition: all 0.3s; } /* Overlay Color */ .gallery-reel-item-src:after { content: ""; background-color: rgba(0,0,0,0.75); position: absolute; top: 50; left: 50; width: 100%; height: 100%; z-index: 9999; opacity: 0; transition: all 0.3s; } figure:hover .gallery-reel-item-src:after { opacity: 100; transition: all 0.3s; } You can enable Gallery Caption, then edit each reel images >> enter text in Description box Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment