OlivierL

https://star-squid-8hw2.squarespace.com/ PASS : DGBEQWater2024 Hello all, I'd like to scroll through the website normally, but when hitting a section, I want it to become fixed and having only one "div" scroll. When the div hits its bottom, then the scrolling continues normally. I don't know If I'm clear. It's kind of a reverse "sticky" : the section have a normal size, with a div with a huge height on it and I want only this div to scroll, not the reste of the website. I did an exemple on my website on this section : section[data-section-id="65a55d0d4578b91024360774"] Let me know if I'm not clear, and sorry but I can't find any exemple anywhere (which tells me that it's impossible to do). Thank you ! EDIT : an alternate solution can totally be that the background image of the section is fixed and the text is sticky to fake the fact that the section doesn't move as images scrolls, if it's more simple/understandable.

Ok, I found it ! If you want to modify the section's property for this particular thing, you have to target the section id, and not the "data-section-id". So you have to inspect the code, and find your container of the whole section (just a few lines above). For me, this gives : section[id="yui_3_17_2_1_1705329697048_415"] .section-background img { object-fit: contain; } That's it ! Hope this will help someone !

Hello ! Sorry to bring this old topic to life, but I'm having the same problem with a background image of a section. section[data-section-id="659fd82786d71e4f3370c2de"] .image-block-wrapper img { object-fit: cover; } I tried using this ^, but it doesn't do anything, with or without the "!important" in the end... Can anyone help ? The goal is to have the object-fit to CONTAIN. The website is : https://star-squid-8hw2.squarespace.com/ pass : ***hiddin due to solution found*** The section is mainly the second one (id="659fd82786d71e4f3370c2de" - with the guy working on a huge pipe). Thank you !

Hey ! This is because in the meantime, I managed to resolve my problem. I'll post the solution right on this message : First block : the gallery <div id="gallerie_custom"> <img id="topleft" class="image-gallerie" src="https://static1.squarespace.com/static/61c04b695bbe1977dff7a214/t/623446e3670896743cc26a56/1647593187286/SBRE_logo.jpg"/> <img id="topright" class="image-gallerie" src="https://static1.squarespace.com/static/61c04b695bbe1977dff7a214/t/623446e3670896743cc26a56/1647593187286/SBRE_logo.jpg"/> <img id="midleft" class="image-gallerie" src="https://static1.squarespace.com/static/61c04b695bbe1977dff7a214/t/623446e3670896743cc26a56/1647593187286/SBRE_logo.jpg"/> <img id="midright" class="image-gallerie" src="https://static1.squarespace.com/static/61c04b695bbe1977dff7a214/t/623446e3670896743cc26a56/1647593187286/SBRE_logo.jpg"/> <img id="botleft" class="image-gallerie" src="https://static1.squarespace.com/static/61c04b695bbe1977dff7a214/t/623446e3670896743cc26a56/1647593187286/SBRE_logo.jpg"/> <img id="botright" class="image-gallerie" src="https://static1.squarespace.com/static/61c04b695bbe1977dff7a214/t/623446e3670896743cc26a56/1647593187286/SBRE_logo.jpg"/> <label class="description-defaut" id="default-desc">!!! Description par défaut !!!</label> <label class="description" id="topleft-desc">!!! Top Left !!!</label> <label class="description" id="topright-desc">!!! Top Right !!!</label> <label class="description" id="midleft-desc">!!! Mid Left !!!</label> <label class="description" id="midright-desc">!!! Mid Right !!!</label> <label class="description" id="botleft-desc">!!! Bot Left !!!</label> <label class="description" id="botright-desc">!!! Bot Right !!!</label> </div> Second block : the css #gallerie_custom{ position: relative; z-index: 3; top: 20px; width: 500px; } .image-gallerie{ width: 200px; height: 200px; display: block inline; position: relative; border: solid grey 3px; } .description-background { position: relative; /*top: -230px;*/ z-index: 1; height: 200px; background: #6AB9D9; margin-top: -230px; } .description, .description-defaut { font-family: proxima-nova, sans-serif !important; z-index: 2; display: block; position: absolute; top: 550px; left: -515px; color: white; } .description { visibility: hidden; opacity: 0; } #topleft:hover ~ #topleft-desc, #topright:hover ~ #topright-desc, #midleft:hover ~ #midleft-desc, #midright:hover ~ #midright-desc, #botleft:hover ~ #botleft-desc, #botright:hover ~ #botright-desc{ visibility: visible; opacity: 1; } #topleft:hover ~ #default-desc, #topright:hover ~ #default-desc, #midleft:hover ~ #default-desc, #midright:hover ~ #default-desc, #botleft:hover ~ #default-desc, #botright:hover ~ #default-desc{ visibility: hidden; opacity: 0; } Thanks for you answer, anyway 🙂

https://cello-cheetah-stpl.squarespace.com/ I set a password, hopping it will work : tuanphanpassword

Hello ! Thanks for this topic, it helped me a lot. My problem is directly related to the topic : How can I have the title/description of the image appears somewhere else when I hover an image in the gallery ? To be more clear : when I hover an image, I'd like to have the description appearing in another block. (I search how to show you the page, and I'll post the password and url as soon as it's possible) Thank you !

So, obviously, after a few days searching, this is when I ask for help that I find the solution... If anyone needs it, this is the CSS code I injected in the Custom CSS area. Of course, I'll be happy to modify it if any of the CSS masters that lurks around here stumble upon this post and see some awfull newbie mistakes on that code ! Here it is : .image-card-wrapper { display: block !important; margin-left: 15px !important; margin-top: 15px !important; } .image-card * { text-align: left !important; } .image-title p{ font-family: proxima-nova-condensed, sans-serif !important; font-weight: 900 !important; font-size: 2.5em !important; color: black !important; } .image-subtitle { margin-top:75px !important; } .image-subtitle p{ font-family: proxima-nova-condensed, sans-serif !important; font-size: 1.1em !important; }

Site URL: https://cello-cheetah-stpl.squarespace.com/ Hello, I've been trying for a while to reproduce this template (image linked) in my squarespace website. The site is not online yet, so I don't know how to show you anything (nothing to see really, but...). My main problem is that I can't write over an image. I mean, I can, but using the provided option, and so the text is only centered, as you may know. So, could you help me with this ? The goal is to have a full background image instead of the white, so I can't use the section banner and pray for the best (which is probably the worst to do, obviously). So I meant to have like the Orange image with the 3 stripes on one "box" and write over it, and another "box" with the blue and white image. If it is not possible to have that overlap of the cyan "box", it's not a problem, we'll move it down. Does all of this make sense ? Pardon me for my english, as you may have noticed in the attached image, I'm french 😄 Thanks for your help ! Oh, by the way, I'm using Brine on SquareSpace 7.0.