Jump to content

katiedunnit

Circle Member
 View Profile  See their activity

  • Posts

    29

  • Joined

  • Last visited

 Content Type 

Posts posted by katiedunnit

    Remove underline from blog post 'read more'?

    in Customize with code

    Posted · Edited by 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)

    image.thumb.png.33982cf78c9dd3f619469a3e47e09896.png

     

    Blog Page Post Grid - issue with underline:image.thumb.png.336f60159fb1fd51fbefee9a84636bf3.png

     

    Threepointbalance.squarespace.com

    The password for the site is kstudio. Thoguhts?

    Add a overlay hover effect that reveals blog title over image?

    in Customize with code

    Posted · Edited by katiedunnit

    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;
}

     

    Screen Shot 2022-07-06 at 9.56.21 AM.png

    Screen Shot 2022-07-06 at 10.35.21 AM.png

    Can't get rid of whitespace around Sticky Nav

    in Customize with code

    Posted

    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>

    Screen Shot 2022-06-30 at 10.55.02 AM.png

    Zoom and overlay effects on Blog thumbnails?

    in Customize with code

    Posted

    On 2/2/2021 at 1:35 AM, tuanphan said:

    Hi. It looks like you solved this?

    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;}

     

    How to make a list section clickable - without button!

    in Customize with code

    Posted

    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;}
}

     

    Screen Shot 2021-12-29 at 2.47.42 PM.png

    Simple Grid Gallery Scale Hover Effect

    in Customize with code

    Posted

    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;
  }}

     

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources