Ayesh Posted October 25, 2022 Share Posted October 25, 2022 (edited) Hi, I am trying to create a text on hover after darkening (or if possible blurring) the image underneath. I've managed it before on a simple grid but for some reason it's not working for Masonry. Also as a side question, would it be possible to add multiple lines of text the to the image description with each line having different styles? I've added a sample image below for reference. This is a link to the page on my site (https://www.claireandayesh.com/auto-photography). Thank you very much! Edited October 25, 2022 by Ayesh Accidentally published before completion Link to comment
tuanphan Posted October 26, 2022 Share Posted October 26, 2022 #1. Can you enable Gallery Caption + add some image caption first? We can check code easier #2. 2 lines of text or >2 lines? Each case will need a different solution 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
Ayesh Posted October 27, 2022 Author Share Posted October 27, 2022 On 10/26/2022 at 11:03 AM, tuanphan said: #1. Can you enable Gallery Caption + add some image caption first? We can check code easier #2. 2 lines of text or >2 lines? Each case will need a different solution Hi, thank you so much for getting back to me! #1. Sorry about that. I have enabled Captions in the Edit Section settings and have created Captions for the images on the first few rows. #2. 2 lines of text. Essentially the name of the album and a text underneath it in either a different font or size saying "Click to see more" Link to comment
tuanphan Posted October 31, 2022 Share Posted October 31, 2022 On 10/27/2022 at 9:23 AM, Ayesh said: Hi, thank you so much for getting back to me! #1. Sorry about that. I have enabled Captions in the Edit Section settings and have created Captions for the images on the first few rows. #2. 2 lines of text. Essentially the name of the album and a text underneath it in either a different font or size saying "Click to see more" Hi, Can you check it again? I don't see any captions 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
Ayesh Posted November 1, 2022 Author Share Posted November 1, 2022 22 hours ago, tuanphan said: Hi, Can you check it again? I don't see any captions Hi, I checked again but I could have done something wrong. Just to double check I've included a few screenshots of what I can see. Also, image description is the same as captions right? or no? Link to comment
tuanphan Posted November 4, 2022 Share Posted November 4, 2022 That's weird. Your setting looks correct. But I don't see any caption/description here. Is this right page? https://www.claireandayesh.com/auto-photography 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
Ayesh Posted November 6, 2022 Author Share Posted November 6, 2022 On 11/4/2022 at 5:25 PM, tuanphan said: That's weird. Your setting looks correct. But I don't see any caption/description here. Is this right page? https://www.claireandayesh.com/auto-photography Yes, that is the correct page. Do you think the captions are not showing up because of this code I've entered?? .gallery-section .gallery-caption p { text-align: center; font-size: 80px; font-weight: 500; color: #000000; text-transform: normal; line-height: 2em; font-family: inherit; } .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(255,255,255,0.7); /* overlay color */ height: 100%; max-width: unset; padding: 0; opacity: 0; pointer-events: none; } .gallery-caption-wrapper { display: flex; align-items: center; /* center vertically */ justify-content: center; /* center horizontally */ } .gallery-caption-content { font-size: 1.8rem !important; /* caption font size */ color: white; /*caption font color */ } .gallery-grid-item { position: relative; } .gallery-grid-item:hover .gallery-caption { opacity: 1; } .gallery-caption-grid-simple { transition-delay: 0ms; } body { background: #FFFFFF!important; } I entered this code to get a similar effect on another page. But that page has a simple grid Link to comment
tuanphan Posted November 6, 2022 Share Posted November 6, 2022 2 hours ago, Ayesh said: Yes, that is the correct page. Do you think the captions are not showing up because of this code I've entered?? .gallery-section .gallery-caption p { text-align: center; font-size: 80px; font-weight: 500; color: #000000; text-transform: normal; line-height: 2em; font-family: inherit; } .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(255,255,255,0.7); /* overlay color */ height: 100%; max-width: unset; padding: 0; opacity: 0; pointer-events: none; } .gallery-caption-wrapper { display: flex; align-items: center; /* center vertically */ justify-content: center; /* center horizontally */ } .gallery-caption-content { font-size: 1.8rem !important; /* caption font size */ color: white; /*caption font color */ } .gallery-grid-item { position: relative; } .gallery-grid-item:hover .gallery-caption { opacity: 1; } .gallery-caption-grid-simple { transition-delay: 0ms; } body { background: #FFFFFF!important; } I entered this code to get a similar effect on another page. But that page has a simple grid Which image did you add caption/description? 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
Ayesh Posted November 19, 2022 Author Share Posted November 19, 2022 On 11/6/2022 at 12:15 PM, tuanphan said: Which image did you add caption/description? The first 4 rows of images Link to comment
tuanphan Posted November 21, 2022 Share Posted November 21, 2022 Add this to Design > Custom CSS /* Auto Photography */ body#collection-634bf167cb4d9e41d6ae8574 { figure.gallery-masonry-item { position: relative; } /* title */ figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content { position: absolute !important; 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-wrapper p.gallery-caption-content, .gallery-masonry-item:hover .gallery-caption { opacity: 1 !important; } /* overlay */ .gallery-masonry-item-wrapper a:after, .gallery-masonry-item-wrapper:after { background: rgba(0,0,0,0.5); /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; pointer-events: none; } .gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after, .gallery-masonry-item:hover .gallery-masonry-item-wrapper:after { opacity: 0.75; } /* remove gap */ figcaption { padding: 0 !important; } /* image zoom */ .gallery-masonry-item-wrapper{ transition: transform 0.5s ease; } .gallery-masonry-item:hover .gallery-masonry-item-wrapper img{ transform: scale(1.3); transition: transform 0.5s ease; }}} 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
Ayesh Posted December 16, 2022 Author Share Posted December 16, 2022 On 11/21/2022 at 10:52 AM, tuanphan said: Add this to Design > Custom CSS /* Auto Photography */ body#collection-634bf167cb4d9e41d6ae8574 { figure.gallery-masonry-item { position: relative; } /* title */ figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content { position: absolute !important; 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-wrapper p.gallery-caption-content, .gallery-masonry-item:hover .gallery-caption { opacity: 1 !important; } /* overlay */ .gallery-masonry-item-wrapper a:after, .gallery-masonry-item-wrapper:after { background: rgba(0,0,0,0.5); /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; pointer-events: none; } .gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after, .gallery-masonry-item:hover .gallery-masonry-item-wrapper:after { opacity: 0.75; } /* remove gap */ figcaption { padding: 0 !important; } /* image zoom */ .gallery-masonry-item-wrapper{ transition: transform 0.5s ease; } .gallery-masonry-item:hover .gallery-masonry-item-wrapper img{ transform: scale(1.3); transition: transform 0.5s ease; }}} Added to Custom CSS but the captions show up underneath instead of an hover overlay https://www.claireandayesh.com/auto-photography Link to comment
Solution tuanphan Posted December 20, 2022 Solution Share Posted December 20, 2022 On 12/16/2022 at 11:34 AM, Ayesh said: Added to Custom CSS but the captions show up underneath instead of an hover overlay https://www.claireandayesh.com/auto-photography It looks like you removed some code in your current code since Nov 21 Use this new code /* Auto Photography */ body#collection-634bf167cb4d9e41d6ae8574 { figcaption.gallery-caption.gallery-caption-grid-masonry { position: static !important; } figure.gallery-masonry-item { position: relative; } /* title */ figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content { position: absolute !important; 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; color: white !important; } .gallery-masonry-item:hover .gallery-caption-wrapper p.gallery-caption-content, .gallery-masonry-item:hover .gallery-caption { opacity: 1 !important; } /* overlay */ .gallery-masonry-item-wrapper a:after, .gallery-masonry-item-wrapper:after { background: rgba(0,0,0,0.5); /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; pointer-events: none; } .gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after, .gallery-masonry-item:hover .gallery-masonry-item-wrapper:after { opacity: 0.75; } /* remove gap */ figcaption { padding: 0 !important; } /* image zoom */ .gallery-masonry-item-wrapper{ transition: transform 0.5s ease; } .gallery-masonry-item:hover .gallery-masonry-item-wrapper img{ transform: scale(1.3); transition: transform 0.5s ease; }} 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
Ayesh Posted December 21, 2022 Author Share Posted December 21, 2022 On 12/20/2022 at 7:05 PM, tuanphan said: It looks like you removed some code in your current code since Nov 21 Use this new code /* Auto Photography */ body#collection-634bf167cb4d9e41d6ae8574 { figcaption.gallery-caption.gallery-caption-grid-masonry { position: static !important; } figure.gallery-masonry-item { position: relative; } /* title */ figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content { position: absolute !important; 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; color: white !important; } .gallery-masonry-item:hover .gallery-caption-wrapper p.gallery-caption-content, .gallery-masonry-item:hover .gallery-caption { opacity: 1 !important; } /* overlay */ .gallery-masonry-item-wrapper a:after, .gallery-masonry-item-wrapper:after { background: rgba(0,0,0,0.5); /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; pointer-events: none; } .gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after, .gallery-masonry-item:hover .gallery-masonry-item-wrapper:after { opacity: 0.75; } /* remove gap */ figcaption { padding: 0 !important; } /* image zoom */ .gallery-masonry-item-wrapper{ transition: transform 0.5s ease; } .gallery-masonry-item:hover .gallery-masonry-item-wrapper img{ transform: scale(1.3); transition: transform 0.5s ease; }} OMG! It works perfectly! Thank so so much for helping me out and your patience throughout! Much appreciated! 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