AltitudeDesign Posted April 21, 2022 Share Posted April 21, 2022 (edited) Site URL: http://graphicstructures.squarespace.com If you look at this page I have managed to give the blog masonry a hover title and yellow overlay - http://graphicstructures.squarespace.com/ (pass: preview) I am trying to replicate this on a summary block on this page. I am nearly there but it's a bit buggy, isn't working well on mobile and also there is an odd white space under the images? http://graphicstructures.squarespace.com/projects (pass: preview) Here is the code I'm currently toying with: .summary-item img { transition:all .1s ease !important; } .summary-item .summary-content { display: flex; place-items: center; justify-content: center; } .summary-item .summary-content { background: rgba(254,237,0,.9); width:100%; height:100%; position: absolute; color: #fff !important; top: 50%; left: 50%; opacity: 0 !important; pointer-events: auto; transition: all .1s ease; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform:translate(-50%, -50%) } .summary-item .summary-title, .summary-item .summary-metadata--primary, .summary-item .summary-metadata--secondary.summary-item .summary-excerpt { color: #000 !important; font-size:20px !important; text-align:center !important; background-color: rgba(3,255,255,0) !important; } .summary-item:hover .summary-content { opacity:1 !important; } .summary-title a:after { content:''; width: 100vw; height: 100vh; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .summary-item { overflow:hidden !important; } Edited April 21, 2022 by AltitudeDesign wrong links Link to comment
Beyondspace Posted April 21, 2022 Share Posted April 21, 2022 6 minutes ago, AltitudeDesign said: Site URL: http://graphicstructures.squarespace.com If you look at this page I have managed to give the blog masonry a hover title and yellow overlay - http://graphicstructures.squarespace.com/projects (pass: preview) I am trying to replicate this on a summary block on this page. I am nearly there but it's a bit buggy, isn't working well on mobile and also there is an odd white space under the images? http://graphicstructures.squarespace.com (pass: preview) Here is the code I'm currently toying with: .summary-item img { transition:all .1s ease !important; } .summary-item .summary-content { display: flex; place-items: center; justify-content: center; } .summary-item .summary-content { background: rgba(254,237,0,.9); width:100%; height:100%; position: absolute; color: #fff !important; top: 50%; left: 50%; opacity: 0 !important; pointer-events: auto; transition: all .1s ease; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform:translate(-50%, -50%) } .summary-item .summary-title, .summary-item .summary-metadata--primary, .summary-item .summary-metadata--secondary.summary-item .summary-excerpt { color: #000 !important; font-size:20px !important; text-align:center !important; background-color: rgba(3,255,255,0) !important; } .summary-item:hover .summary-content { opacity:1 !important; } .summary-title a:after { content:''; width: 100vw; height: 100vh; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .summary-item { overflow:hidden !important; } Do you mean reducing these space between items? On mobile, when I touch and hold for a second, this overlay appear. Is it different when acting on your device? Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
AltitudeDesign Posted April 21, 2022 Author Share Posted April 21, 2022 I am sorry to confuse you. I want this page - http://graphicstructures.squarespace.com/projects and the way the overlays work to look like this page - http://graphicstructures.squarespace.com Link to comment
tuanphan Posted April 24, 2022 Share Posted April 24, 2022 On 4/21/2022 at 10:37 PM, AltitudeDesign said: I am sorry to confuse you. I want this page - http://graphicstructures.squarespace.com/projects and the way the overlays work to look like this page - http://graphicstructures.squarespace.com Remove "Overlay Color code in your above code" & use this code to add yellow overlay a.summary-thumbnail-container.sqs-gallery-image-container:after { content: ""; background-color: rgba(254,237,0,.9); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } .summary-item:hover a.summary-thumbnail-container.sqs-gallery-image-container:after { 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
AltitudeDesign Posted April 24, 2022 Author Share Posted April 24, 2022 (edited) 9 hours ago, tuanphan said: Remove "Overlay Color code in your above code" & use this code to add yellow overlay a.summary-thumbnail-container.sqs-gallery-image-container:after { content: ""; background-color: rgba(254,237,0,.9); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } .summary-item:hover a.summary-thumbnail-container.sqs-gallery-image-container:after { opacity: 1; } Thank you for your reply mate Still not acting right, I hope you can help further? https://graphicstructures.squarespace.com/projects (pass: preview) There is still this odd gap underneath and also you are only able to click on the title not the whole box? Here is the code I am using now: .summary-item .summary-content { display: flex; place-items: center; justify-content: center; } .summary-item .summary-content { background: rgba(254,237,0,.9); position: absolute; width:100%; height:100%; color: #fff !important; top: 50%; left: 50%; opacity: 0 !important; pointer-events: auto; transition: all .1s ease; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform:translate(-50%, -50%) } .summary-item .summary-title, .summary-item .summary-metadata--primary, .summary-item .summary-metadata--secondary.summary-item .summary-excerpt { color: #000 !important; font-size:20px !important; text-align:center !important; background-color: rgba(3,255,255,0) !important; } .summary-item:hover .summary-content { opacity:1 !important; } a.summary-thumbnail-container.sqs-gallery-image-container:after { content: ""; background-color: rgba(254,237,0,.9); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } .summary-item:hover a.summary-thumbnail-container.sqs-gallery-image-container:after { opacity: 1; } Edited April 24, 2022 by AltitudeDesign Link to comment
AltitudeDesign Posted April 26, 2022 Author Share Posted April 26, 2022 @tuanphan Are you able to help at all? 🙏 Link to comment
Solution AltitudeDesign Posted April 26, 2022 Author Solution Share Posted April 26, 2022 OK I think I have solved it myself. Here is my code if anyone needs help with this in the future: .summary-item .summary-content { display: flex; place-items: center; justify-content: center; } .summary-item .summary-content { background: rgba(254,237,0,0); position: absolute; color: #fff !important; top: 50%; left: 50%; opacity: 0 !important; pointer-events: auto; transition: all .1s ease; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform:translate(-50%, -50%) } .summary-item .summary-title, .summary-item .summary-metadata--primary, .summary-item .summary-metadata--secondary.summary-item .summary-excerpt { color: #000 !important; font-size:25px !important; text-align:center !important; background-color: rgba(3,255,255,0) !important; } .summary-item:hover .summary-content { opacity:1 !important; } a.summary-thumbnail-container.sqs-gallery-image-container:after { content: ""; background-color: rgba(254,237,0,.9); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } .summary-item:hover a.summary-thumbnail-container.sqs-gallery-image-container:after { opacity: 1; } Link to comment
tuanphan Posted April 29, 2022 Share Posted April 29, 2022 On 4/26/2022 at 3:11 PM, AltitudeDesign said: @tuanphan Are you able to help at all? 🙏 I see it looks fine to me. Did you solve it? 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
BridgetKelley Posted April 29, 2022 Share Posted April 29, 2022 Hello can you share how you solved this?? Link to comment
AltitudeDesign Posted April 29, 2022 Author Share Posted April 29, 2022 38 minutes ago, BridgetKelley said: Hello can you share how you solved this?? Please look here for the solution - Link to comment
BridgetKelley Posted April 29, 2022 Share Posted April 29, 2022 @tuanphan can you take a look at my code for this, I'm trying to isolate this to one section and every time I put a media screen or the section id around this code, the summary block disappears. As you can see there is a summary block directly below this one and I do not want that one to be effected. I'm also trying to place an offset outlined border in and I can not get that to show either. Example of border is attached as well as screenshots of the Summary block without the Section isolated, and with the section isolated. https://ck-option-1.squarespace.com/ CK2022! Quote //Summary Block Portfolio Hover - Home Page// section[data-section-id="6266cd3f1220985d65614f2a"]{ .summary-item { display: flex; place-items: center; justify-content: center; position: relative; .summary-content { position: absolute; top: 50%; left: 50%; opacity: 0 !important; pointer-events: auto; transition: all .5s ease; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); }} .summary-item .summary-title, .summary-item .summary-metadata--primary, .summary-item .summary-metadata--secondary.summary-item .summary-excerpt { color: #6A698F !important; font-size:25px !important; text-align:center !important; } .summary-item:hover .summary-content { opacity:1 !important; } a.summary-thumbnail-container.sqs-gallery-image-container:after { content: ""; background-color: rgba(231,239,238,.9); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } .summary-item:hover a.summary-thumbnail-container.sqs-gallery-image-container:after { opacity: 1; }} Link to comment
tuanphan Posted May 1, 2022 Share Posted May 1, 2022 On 4/29/2022 at 11:11 PM, BridgetKelley said: @tuanphan can you take a look at my code for this, I'm trying to isolate this to one section and every time I put a media screen or the section id around this code, the summary block disappears. As you can see there is a summary block directly below this one and I do not want that one to be effected. I'm also trying to place an offset outlined border in and I can not get that to show either. Example of border is attached as well as screenshots of the Summary block without the Section isolated, and with the section isolated. https://ck-option-1.squarespace.com/ CK2022! It looks like you figured it out? I see 1 summary only 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
zoehoward Posted July 11, 2022 Share Posted July 11, 2022 Hi everyone, especially @tuanphan 🙂 I love this code but i want the title, excerpt and metadata to stack - at the moment they are placed next to each other on the same line - please can you help me? Link to comment
tuanphan Posted July 11, 2022 Share Posted July 11, 2022 6 hours ago, zoehoward said: Hi everyone, especially @tuanphan 🙂 I love this code but i want the title, excerpt and metadata to stack - at the moment they are placed next to each other on the same line - please can you help me? Can you share link to page where you use summary? 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
zoehoward Posted July 13, 2022 Share Posted July 13, 2022 On 7/11/2022 at 4:50 PM, tuanphan said: Can you share link to page where you use summary? HI @tuanphan I have actually removed the hover now because I realise that most people will use the site on mobile so there's no point in it. But thank you for responding, i appreciate it very much! 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