katiedunnit

Hey all, I customized my blog layout and got it to look right on the summary block, but not on the native blog page. Can someone help me figure out how to target the underline on the button on blog page post grid? Summary Block (how I want it) Blog Page Post Grid - issue with underline: Threepointbalance.squarespace.com The password for the site is kstudio. Thoguhts?

@tuanphan So I got rid of the whitespace, but the primary issue I can't seem to fix is the nav bar getting cut off in browser. I've tried different numbers (94vh-92vh) and now it's (100vh-92vh) and still happening. Nothing seems to change this.

Hey @creedon - password is password 🙂 So it looks on a smaller screen that there's no whitespace but I'm struggling to get the nav to be in the initial viewport without getting cut off. Thoughts?

@tuanphan Ooops! Updated: nagy-design.squarespace.com PW: password

Site URL: https://nagy-design.squarespace.com Hey Folks, I'm trying to get a couple of features to have the same hover effect: Summary Block Blog page articles The hover effect: Reveal the title of the blog and add a slightly transparent overly with the color #805c60, with a zoom effect, along with drop shadow and slight movement. (https://www.loom.com/share/763f4336ca624fd8b1e915200aec2718) Right now I've got the home page with summary block almost working. I used a brightness filter, but that just adds a black transparency layer on hover, and I need it to be the color mentioned above. I've tried a few variations of code but just can't seem to get it. On the blog page, I want the same effect. I tried to apply it, but don't see any blog titles at all. When I reveal excerpt, it shows below. I can't seem to get a hover effect with the title. Thoughts? Here's the code I used for the home page section: //ROUND Summary blocks [data-section-id="62c474a24e68127a1a6a51f1"]{ .sqs-gallery-design-grid .margin-wrapper {transition: box-shadow .5s, transform .5s; border-radius: 500px; overflow: hidden; } .sqs-gallery-design-grid .margin-wrapper:hover { box-shadow: 1px 10px 10px rgba(0, 0, 0, 0.2); transform: translateY(-10px);} .sqs-gallery-block-grid { overflow: visible;} // Grid Gallery Zoom // @media all and (min-width:770px){ .sqs-block-gallery .sqs-gallery-design-grid .slide:hover img{ transform: scale(1.1); -webkit-filter: brightness(10%); filter: brightness(20%); } .sqs-block-gallery .sqs-gallery-design-grid .slide:hover .image-slide-title{ opacity: 2 } .sqs-block-gallery .sqs-gallery-design-grid .slide img{ -webkit-transition: all 1s ease-in-out !important; -moz-transition: all 1s ease-in-out !important; -o-transition: all 1s ease-in-out !important; transition: all 1s ease-in-out !important; } .sqs-block-gallery .sqs-gallery-design-grid .image-slide-title{ position: absolute; opacity: 0; top: 45%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); pointer-events: none; -webkit-transition: all 1s ease-in-out !important; -moz-transition: all 1s ease-in-out !important; -o-transition: all 1s ease-in-out !important; transition: all 1s ease-in-out !important; z-index:99999999999; font-size: 25px !important; font-weight: 500 !important; color: #805c60!important; padding: 10px; } } } #block-4c5b6117782fd90b385e { margin-top:-250px; } and the blog page: //**PROJECTS PAGE**// //rounded images [data-section-id="62ba3b21816549635a744e9d"]{.blog-basic-grid a { border-radius: 500px!important; }} [data-section-id="62ba3b21816549635a744e9d"]{ .sqs-block-gallery .sqs-gallery-design-grid .slide:hover img{ transform: scale(1.1); -webkit-filter: brightness(10%); filter: brightness(20%); }} //title overlay .blog-basic-grid .blog-title { margin-top: -60px; }

Site URL: https://nagy-design.squarespace.com Hey there, I implemented a sticky nav, and a couple things I need help with: I want the logo to be bigger, extending outside the nav bar I do not want any white space around the slider The navigation should sit at the bottom, not showing any of the section below. I've changed the vh between 93-95 and messed around with different sizing but still can't get it to work Here's the code used: <style> @media screen and (min-width: 768px) { #header { position: sticky; top: 0; display: none; } main .page-section:first-child + #header { display: block; } main .page-section:first-child { min-height: calc(93vh - 92px)!important; } } </style> <script> document.addEventListener("DOMContentLoaded",function() { const header = document.getElementById('header'); const firstSection = document.querySelector('.page-section:first-child'); firstSection.after(header); }); </script>

Looking for the same @tuanphan! Just I can't make the above nav a coded image, it should just sit below the first section. Looks like jesswp needs the same thing. 🙂

I didn't and I very much need some help! lol Here's what I've attempted, but I can't get it to stay within the container: //Hover state// .BlogList-item img { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing:grayscale; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property:transform; transition-property:transform; } .blog-basic-grid .image-wrapper:hover, .blog-basic-grid .image-wrapper:active { -webkit-transform: scale(1.1); transform: scale(1.1); } .image-wrapper { overflow: hidden;}

So, i ended up using code blocks instead of working with the list sections - way easier to get done IMO. Hopefully this helps you too! [data-section-id="INPUT YOURS"] { .code-block { background: #fff; transition: all .4s ease-in-out; margin: 15px; padding: 30px !important; height: 350px; } .code-block:hover { box-shadow: 0 7px 12px rgba(0,0,0,0.25); transition: box-shadow 0.3s ease-in-out;} }

So my client doesn't like the "Learn More" click-through link in the list section of their services (see below). Instead they want to see a hover effect to demonstrate the boxes are clickable, likely a scaling effect. I'm currently investigating using nth:child with page syntax, but haven't gotten it so far. Thoughts?

Actually got it! Thanks for your attention. /* SIMPLE GRID ANIMATION */ // Scale Up Grid Gallery// [data-section-id="61afbb36e3c6b10a92958949"]{ .gallery-grid-item-wrapper { overflow: hidden;} .gallery-grid-item-wrapper img { transition: all 0.3s;} figure:hover img { transform: scale(1.3); transition: all 0.3s;} //caption size// .gallery-caption-content{ font-size: 15px!important; }}

Hey all - trying to add a hover scale effect to this simple grid gallery and I can't get it to stay within the bounds of the image container.I tried a few different variations of code, and this is as close as I've gotten. Thoughts?

@tuanphan Not really! the dates look so janky. Do you know how to write this so there's no year at the end? I used only CSS on this, a little worried about it.

Do you happen to have any references for JS to make that happen? Here's a link to the site: tssrm.squarespace.com Pw: Temp

Hey folks, struggling to get the css to do a button like this one attached, anyone know? Plan to add in a "click" effect too.