Jump to content

Chelseys

Member
  • Posts

    5
  • Joined

  • Last visited

Chelseys's Achievements

  1. Hi, I am trying to create an image that flips upon hover that has the image on one side and then text in the other. I found the code to do this, however the image has to be selected as a "Poster" which from everything I'm reading should be under the design tab of the image itself, however these are the only options available: Tutorial: https://insidethesquare.co/squarespace-tutorials/rotating-image-card Code to actually flip image: /*Card Flip Effect*/ #block-id{ /* Default Setup */ &.image-block .sqs-block-content{ perspective: 2000px; } .design-layout-poster { position: relative; transition: transform 0.8s; transform-style: preserve-3d; } //Image .design-layout-poster .intrinsic{ -webkit-backface-visibility: hidden; backface-visibility: hidden; } //Caption .design-layout-poster figcaption{ -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: rotateY(180deg); background: hsla(0,0%,15%,1); //Add if needed //border-radius: 20px; } /*Hover Effect*/ &.image-block:hover .design-layout-poster { transform: rotateY(180deg); } } Can anyone help me find how to make the image "Poster"?
  2. Thank you so much! I reduced the size a bit and it's perfect!
  3. Yes, however it's very hard to read. Is there a way to use a different image on mobile? I'd like to use this one on mobile if possible:
  4. Hi, I'm trying to get the linked text on a single line above the nav-bar on desktop and at the top of the screen on mobile. Link to Page Currently working on. I can't provide login info, unfortunately. This is the code I currently have: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('<p class="survivor-support-line"><a href="tel:971-235-0021">24 Hour Survivor Support Line: 971-235-0021</a></p>').insertAfter('.header-title'); }); </script> <style> p.survivor-support-line { position: relative; display: block; font-family: work sans; color: #ED3345; font-style: normal; text-decoration: underline; text-align: right; }</style>
×
×
  • 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.