Jump to content

Card Hover Animation

Go to solution Solved by tuanphan,

Recommended Posts

Posted (edited)

Hello 

I am trying to create a text reveal on a clients website, however it works when I'm in edit mode, but doesn't when I save an exit and I cannot figure out whats happening. 

 

Here is a link to a video showing it

https://www.loom.com/share/41ceabd7d04e46f1a2cdb77b70dbb6b4?sid=de57d786-d740-4f7d-af65-d9f999028d30

 

I have created a duplicate of it on a dummy site (to hide my clients details).

Its exactly the same and the same thing is happening. 

https://spaciousness-fold.squarespace.com/

P/W: thankyou

 

Here is the code i am using (from https://schwartz-edmisten.com/blog/squarespace-css-card-hover-animation)

 

Any help would be greatly appreciated. 

 

/*
===================================
 HOME PAGE HOVER SECTION STYLING
===================================
*/
#siteWrapper section[data-section-id="665847cd849d4f24b276bb41"]{
  .user-items-list-simple {
    padding-left: 0;
    padding-right: 0;
  }
  .list-item {
    position: relative;
  }
  .list-item-media {
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  .list-item-media:before {
    content: '';
    background: #000;
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: .63;
    transition: opacity .3s ease;
  }
  .list-item-media-inner {
    padding-bottom: 0!important;
    height: 100%!important;
  }
  .list-item-content {
    z-index: 3;
    padding: 5vw 3vw;
  }
  .list-item-content__description, .list-item-content__button {
    opacity: 0;
    transition: opacity .3s ease;
  }
  .list-item-content__title {
    transition: opacity .3s ease;
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translateX(-50%);
  }
  //Hover Styles
  .list-item:hover,.list-item:focus-within {
    .list-item-media:before {
      opacity: .8;
    }
    .list-item-content__description, .list-item-content__button {
      opacity: 1;
    }
    .list-item-content__title {
      opacity: 0;
    }
  }
  @media screen and (max-width:767px){
    .user-items-list-simple {
      grid-template-columns: 1fr;
    }
    .list-item-content {
      padding: 90px 6vw;
    }
    .list-item-content__title {
      opacity: 1;
      position: relative;
      bottom: unset;
      left: unset;
      transform: none;
    }
    .list-item-content__title,.list-item-content__description, .list-item-content__button {
      opacity: 1!important;
    }
  }
}
/* ---- end HOME PAGE HOVER SECTION STYLING ----- */

 

Edited by elizabethc
Link to comment
  • Replies 4
  • Views 644
  • Created
  • Last Reply

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

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

Hire a Designer

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