Jump to content

Red_Dot_Design

Circle Member
  • Posts

    36
  • Joined

  • Last visited

Posts posted by Red_Dot_Design

  1. Hello,

    For my sites homepage, I have created an image swap using custom CSS and code blocks. The intention of this was to replicate a title and colour opacity on hover. This function is currently not available on image blocks which is why I did it this way.  

    This works well on desktop (screenshot attached) but on mobile it appears as per the other screenshot. 

    My site and password: 

    https://gopher-tomato-twpa.squarespace.com/

    Password: hello

    The code I have used is here: 

      //image change on hover//

    .image-swap {
      opacity: 1;
      max-width: 600px; /* adjust widths */
      height: auto; /* adjust height */
      position: relative;
    }
    .image-swap img {
      width: 100%;
      transition: all 0.2s ease;
    }
    .hovered {
      opacity: 0;
      position: absolute;
      left: 0;
    }
    .image-swap:hover .hovered {
      opacity: 1;
    }
     

    Thank you,

    image swap on desktop.png

    image swap on tablet:mobile.jpeg

  2. Hello! I also need help with this.

    My portfolio images (screenshot attached) work fine with overlay on hover on desktop, but the colour overlay and title disappears when on mobile. Is it possible to have these appear with some custom code? 

    I can upgrade to business plan if it requires Javascript.

    Alternatively if this is not possible, please can I have the code for the title to appear under the image on mobile? 

    My site is here: 

    https://gopher-tomato-twpa.squarespace.com/portfolio

    password: hello

    Thanks. 

    Screenshot 2023-07-13 at 09.43.46.png

  3. Hi Ziggy,

    I've moved this onto a new site and I am having a few problems. Firstly, I've added the exact code in the solution above but what happens is as per the attached screenshot titled "Overlay example". 

    Would you be able to have a look and let me know how to adjust the code so the overlay colour covers the photo completely and the text is completely centre aligned? 

    My new site is at:

    https://gopher-tomato-twpa.squarespace.com/

    Password: hello

    Thanks,

    Tara

    Overlay example.png

  4. This is the code I've used to get it to what you see in the screenshot:

     

    .sqs-block.image-block {
     padding: 0;
     margin: 10px;

    }

    .sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay-hover .image-caption-wrapper {
      background: #515b64;
      opacity: 80%;
        width: 100%;
      height: 100%;
    }

     

    Website link here: 

    https://elk-tuna-ztlx.squarespace.com/

    Password: hello

  5. Created a site a year ago where the client was offering their customers memberships to buy.

    The client didn't want to pay the extra per month for a Members Area, so I set set up memberships to buy through a commerce store instead (see Screenshot 1).

    If you look at Screenshot 2 attached you can see there are quite a few customers who purchased these memberships. Now the problem is that the client wants an actual membership area. Is there a way for me to move all the customers (who have technically already bought memberships) into the new membership area? 

    If this isn't technically possible, what would be the best way for me to make this transition manually? An email sent to current commerce customers?

    Screenshot 1.png

    Screenshot 2.png

×
×
  • 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.