elmeto Posted January 23 Share Posted January 23 (edited) I've tried customising the Descriptions on the Grid: Simple Gallery. I want them to be H4 and centred over the top of each image. My positioning isn't working properly as they move on browser resize. Also the text is cut off at the bottom. What am I doing wrong? Here's what I've used: .gallery-caption-wrapper p { background: rgba(0,0,0,0.0); color: white; text-align: center; font-size: 30px!important; font-family: "Bebas-Neue"!important; } .gallery-caption-wrapper { position: absolute; top: -130px; bottom: 0; left: 0; } Thanks in advance! Edited January 28 by elmeto Link to comment
tuanphan Posted January 28 Share Posted January 28 (edited) Hi, What is site url? And with h4, actually you can wrap your description text inside h4 tag Suppose your current image description is mountain in the hike You can change it to <h4>mountain in the hike</h4> Edited January 28 by tuanphan 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!) Link to comment
elmeto Posted January 28 Author Share Posted January 28 Hi, thanks for your reply. The url is https://www.adamdocker.art. There's a section on the homepage called 'Featured Collections'. Under that is a Simple Gallery. We want the description/caption to be centred horizontally and vertically over each thumbnail but somehow it's not working. Thanks Link to comment
tuanphan Posted February 1 Share Posted February 1 On 1/28/2024 at 9:53 PM, elmeto said: Hi, thanks for your reply. The url is https://www.adamdocker.art. There's a section on the homepage called 'Featured Collections'. Under that is a Simple Gallery. We want the description/caption to be centred horizontally and vertically over each thumbnail but somehow it's not working. Thanks Use this new code /* center caption */ .gallery-caption-wrapper { position: static !important; } figcaption.gallery-caption.gallery-caption-grid-simple { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%,-50%) !important; } figure { position: relative !important; } 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!) Link to comment
elmeto Posted February 7 Author Share Posted February 7 On 2/1/2024 at 3:17 AM, tuanphan said: Use this new code /* center caption */ .gallery-caption-wrapper { position: static !important; } figcaption.gallery-caption.gallery-caption-grid-simple { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%,-50%) !important; } figure { position: relative !important; } Thanks very much for this! It works but it breaks the banner at the top of the page and moves it to the bottom of the page. I haven't saved it as the site is live but here is a screenshot showing what happens: Link to comment
tuanphan Posted February 11 Share Posted February 11 You can use this new CSS code [data-section-id="65b03a4b1ec35d548ad945c6"] { /* center caption */ .gallery-caption-wrapper { position: static !important; } figcaption.gallery-caption.gallery-caption-grid-simple { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%,-50%) !important; } figure { position: relative !important; }} 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!) Link to comment
elmeto Posted February 11 Author Share Posted February 11 Brilliant, thank you! That worked for the style, so now visually it looks right. However, there are two more things: 1. The text is covering the hyperlink area, so you can't click there. You can only click above or below the text. Is there a way to fix that? 2. We would like a rollover effect of some kind. Ideally an overlay fade or something simple like that. URL is adamdocker.art Thank you! Link to comment
Solution tuanphan Posted February 12 Solution Share Posted February 12 #1. #2. I updated the code, you can use this [data-section-id="65b03a4b1ec35d548ad945c6"] { /* center caption */ .gallery-caption-wrapper { position: static !important; } figcaption.gallery-caption.gallery-caption-grid-simple { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%,-50%) !important; pointer-events: none; } figure { position: relative !important; } /* overlay */ .gallery-grid-item-wrapper a:after { background: rgba(0,0,0,0.9); /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-grid-item:hover .gallery-grid-item-wrapper a:after { opacity: 0.75; }} 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!) Link to comment
elmeto Posted February 12 Author Share Posted February 12 YES! This worked, thank you so much! 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