cram24 Posted May 17, 2022 Share Posted May 17, 2022 Hi I have added the below code to add captions on hover to my Gallery: Masonry. There are a couple of issues: 1. I want the font to be a bit heavier weight 2. When the caption runs to 2 lines, it is no longer centered - it suddenly left aligns. I'm not a coder, so any help appreciated! figure.gallery-grid-item { position: relative; } .gallery-caption { position: static; } /* title */ .gallery-caption-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 999; padding: 7%; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; } .gallery-masonry-item:hover .gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-masonry-item-wrapper a:after { background: rgba(0,0,0,0.75); /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after { opacity: 0.75; } /* remove gap */ figcaption { padding: 0 !important; .gallery-caption * { color: white !important; font-weight: bold !important; font-size: 50px !important; }} Link to comment
tuanphan Posted May 20, 2022 Share Posted May 20, 2022 #1. Add this code .gallery-caption-content * { font-weight: bold; } #2. Can you share link to page where you use gallery? 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
cram24 Posted May 31, 2022 Author Share Posted May 31, 2022 Thanks TuanPhan, I got it working with the help of someone else. I still haven't figured out the Lightbox issue though! Link to comment
tuanphan Posted June 1, 2022 Share Posted June 1, 2022 I don't see lightbox problem on your post. Can you explain? 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