Leath

Also for some reason when i went back into my site the overlay grey background had disappeared/stoped working. Not sure why this happened.

Hi I am trying to achieve this caption hover look that appears on this website (https://hunterand.co/projects/) in my squarespace site. I am using the masonry grid. I have managed to get the caption to overlay but i can't get it to move to the bottom left. I have tried changing the below align-items: center; justify-content: center; to align-items: bottom; justify-content: left; but it doesn't work. I would also love if i could somehow have my captions over multiple lines if at all possible. It would also be good if the caption was clickable to the link and not just the surrounding image. Any help would be gratefully appreciated! This is my currant code below: .gallery-caption-grid-masonry { opacity: 0; z-index: -1; transition: all .2s; position: absolute; top: 50%; transform: translateY(-50%); left: 0; text-align: bottom; color: #fff; height: 100%; max-width: 100vw; padding: 0; } .gallery-masonry-item:not(.has-clickthrough) .gallery-caption-grid-masonry:before, .gallery-masonry-item a:before { background-color: rgba(0,0,0,.4); content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; opacity: 0; transition: all .5s } .gallery-masonry-item.has-clickthrough:hover .gallery-caption-grid-masonry { z-index: 999999; opacity: 1; height: auto; } .gallery-masonry-item:not(.has-clickthrough):hover .gallery-caption-grid-masonry { z-index: 0; opacity: 1; } .gallery-masonry-item:hover .gallery-caption-grid-masonry:before, .gallery-masonry-item:hover a:before { opacity: 1; transition: all .5s } .gallery-caption-grid-masonry .gallery-caption-wrapper { display: flex; align-items: center; justify-content: center; text-align: left; } .gallery-caption-grid-masonry p.gallery-caption-content { z-index: 1000; font-size: 1.3em; font-weight: 400; margin: 2vh 2vw; } .gallery-caption-grid-masonry p.gallery-caption-content { z-index: 1000; } }

@tuanphan i started a new question earlier with this site where I am having problems around alignment. Maybe your have some idea how to fix?

Oh absolutely. I currently have the line hight across the whole site quite tight. If I new how to just decrease the line hight in the programs section on the home page only, then I could adjust the line height across the whole site to be larger! which would solve most of those problems. Any ideas?

Amazing that worked! Thank you once again! 🙂

Site URL: https://apple-cobalt-rm97.squarespace.com/ Hi! I am trying to have images full bleed in a grid (see images below) with copy below each image. I have somewhat achieved that however the larger image doesn't stay aligned to the bottom of the other images as it scales. The code I used is below. Does anybody have any ideas of how to fix this or a better idea of how to achieve the overall look in general? The images will be links to the programs. I am also having trouble with the text below needing a bit of padding on the left, mainly on the larger image and also making the leading tighter just on this section. Thanks! ////// PROGRAMS HOME PAGE ////// // text no padding // #block-yui_3_17_2_1_1621910892795_30376, #block-yui_3_17_2_1_1621910892795_25128, #block-yui_3_17_2_1_1621910892795_26488, #block-yui_3_17_2_1_1621910892795_29021, #block-yui_3_17_2_1_1621910892795_27755 { background: #000000; padding-bottom: 0px; padding-left: 20px; text-align: left; } // Image no padding // #block-yui_3_17_2_1_1621910892795_10252, #block-yui_3_17_2_1_1621910892795_11420, #block-yui_3_17_2_1_1621910892795_16220, #block-yui_3_17_2_1_1621910892795_19896, #block-yui_3_17_2_1_1621910892795_22882 { padding: 0px; } // Full Width Image Card Page Section // section[data-section-id="60ac50915a700a0d77d5774d"] { overflow-x: hidden !important; overflow-y: hidden !important; .content-wrapper { padding: 0px !important; margin: 0px auto; display: flex; display: contents; } .sqs-layout .sqs-row .sqs-block { padding-bottom: 25px !important; padding-top: 8px !important; }}

Hi @tuanphan can i ask how i could apply this method to other sites? I am currently working on another clients site and I couldn't get this code to work on it. Any ideas? My site is https://apple-cobalt-rm97.squarespace.com/ password aafro

That worked. Thank you!

Sure! <svg class="svg-icon-offer" viewBox="0 0 99 90" style="enable-background:new 0 0 99 90;" xml:space="preserve"> <style type="text/css"> .st0{fill:#CD804F;} .st1{fill:#FFFFFF;} </style> <g> <path class="st0" d="M0,42.87c0.2-8.57,1.28-16.24,5.9-22.94C10.42,13.37,16.95,9.42,24,6.14c8.24-3.83,17.09-4.89,25.98-5.76 c7.65-0.75,15.25-0.49,22.69,1.58c14.08,3.91,22.3,13.2,25.41,27.38c2.43,11.09-0.11,21.12-5.91,30.52 c-7.04,11.4-16.64,20.01-28.75,25.8c-5.37,2.57-10.98,4.06-16.99,4.3c-13.35,0.52-24.66-4.11-33.94-13.49 C4.8,68.71,0.94,59.13,0.38,48.22C0.28,46.21,0.1,44.21,0,42.87z"/> <path class="st1" d="M53.43,67.47c-0.63,0-1.19-0.45-1.3-1.1c-0.07-0.41-1.33-7.92-0.9-14.58c-0.01-0.04-0.02-0.07-0.04-0.11 c-0.1-0.36-0.04-0.72,0.13-1.02c0.16-1.63,0.43-3.17,0.85-4.51c0.37-1.17,0.66-2.38,0.96-3.65c1.4-5.88,2.98-12.55,13.98-15.12 l0.98-0.23l0.48,0.89c0.14,0.26,3.37,6.35,0.6,12.88c-2.16,5.12-7.32,8.95-15.34,11.39c-0.34,6.29,0.88,13.54,0.89,13.64 c0.12,0.72-0.36,1.4-1.08,1.53C53.58,67.46,53.51,67.47,53.43,67.47z M66.67,30.21C58.21,32.56,57,37.69,55.71,43.1 c-0.3,1.27-0.61,2.58-1.02,3.85c-0.24,0.75-0.42,1.59-0.56,2.48c6.62-2.2,10.86-5.4,12.62-9.55 C68.45,35.85,67.35,31.94,66.67,30.21z"/> <path class="st1" d="M50.02,52.75c-4.05,0-11.94-0.75-17.57-6.03c-4.45-4.17-6.51-10.27-6.13-18.12l0.04-0.89l0.84-0.29 c0.31-0.11,7.8-2.66,14.99,1.69c6.1,3.69,9.99,11.1,11.59,22.03l0.2,1.35l-1.36,0.15C52.48,52.64,51.51,52.75,50.02,52.75z M28.93,29.67c-0.14,6.57,1.65,11.65,5.32,15.11c5.38,5.05,13.49,5.39,16.69,5.3c-1.59-9.32-4.98-15.62-10.11-18.72 C35.99,28.43,30.9,29.2,28.93,29.67z"/> </g> </svg>

Amazing this worked perfectly! Thank you! One other thing I would ideally like to achieve is to make each of the icons links to another page. Any ideas how to achieve this? If not I plan on just making the headings the links.

Site URL: https://www.kendracampbell.com.au/home2 Hi! I have dropped in some custom made icons using the markdown block (I did this rather than an image block so I could keep the icons as svg). What I am now trying to achieve is to have these blocks break into two columns on mobile. Currently they just stack one on top of each other but that just makes it seem like you're scrolling for ages to get past that section. If anybody has any idea how to achieve this it would be greatly appreciated!