Jump to content

Susannah

Member
  • Posts

    2
  • Joined

  • Last visited

Posts posted by Susannah

  1. Can someone help? I want some text headings to sit over the images in a gallery on 7.1. I have this code below but I DON'T want it to hover, just be there all the time. I've experimented to try and remove the hover myself but I just keep breaking it. I've put this in the code injection on the page with the gallery, and it looks perfect... but only on hover!

    <style>
    .gallery-caption {
      position: absolute;
      top: 0;
      left: 0;
      /* You can replace the color here with a different color */
      background-color: rgba(0,0,0,0); 
      height: 100%;
      max-width: unset;
      padding: 0;
      opacity: 0;
      -webkit-transition: visibility 600ms cubic-bezier(.4,0,.2,1),opacity 600ms cubic-bezier(.4,0,.2,1);
      -moz-transition: visibility 600ms cubic-bezier(.4,0,.2,1),opacity 600ms cubic-bezier(.4,0,.2,1);
      -o-transition: visibility 600ms cubic-bezier(.4,0,.2,1),opacity 600ms cubic-bezier(.4,0,.2,1);
      -ms-transition: visibility 600ms cubic-bezier(.4,0,.2,1),opacity 600ms cubic-bezier(.4,0,.2,1);
      transition: visibility 600ms cubic-bezier(.4,0,.2,1),opacity 600ms cubic-bezier(.4,0,.2,1);
    }

    .gallery-caption-content {
      /* You can change the color of your image caption here */
      color: #FFFFFF;
      font-size: 40px !important;
      font-weight: 500 !important;
    }

    .gallery-caption-grid-simple {
      transition-delay: 0ms;
    }

    .gallery-caption {
      pointer-events: none;
    }

    .gallery-grid-item {
      position: relative;
    }
    .gallery-grid-item:hover .gallery-caption {
      opacity: 1;
    }

    .gallery-caption-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    </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.