Jump to content

JasmineP

Member
  • Posts

    1
  • Joined

  • Last visited

Reputation Activity

  1. Like
    JasmineP got a reaction from Beyondspace in Adding a hover effect to simple gallery captions   
    Site URL: https://burgundy-watermelon-ld9d.squarespace.com
    Hi, 
    I'm relatively new to Squarespace and even newer to the use of custom CSS but I really would like to know if I am able to add a hover design to the gallery on my main page and still have the links working. What I want is to have a gallery with a main image and title that then links to a project page. I've figured out how to add the hover and customise the colour/text but now the links won't work to the project pages (they're not https links, just page links). I've tried to add in code in the image description area  to add clickable links but I can't seem to get it to work and it seems this could be quite a laborious task. I've included the code below that I used to make the hover style work (the code my not be in use on my site by the time someone looks as it as I'm doing a lot of work to it at the moment). What I would like is so the whole image is a link rather than just the text so that someone can click anywhere on each image in the gallery and go to the relevant project page. 
    This is code that I've found online so not my own. The first part allowed me to customise the gallery captions which used to be below the image but I've since decided I want them to  be on the hover and the second longer part is for the image hovering. 
    Also the password to the site is: Jasmine 
    Any help would be really appreciated. Thanks!
     
    // Gallery Caption Text // .gallery-section .gallery-caption p { text-align: center; font-size: 18px; font-weight: 500; color: #ffffff; text-transform: normal; line-height: 1.2em; font-family: inherit; } .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(255,255,255,0.2); /* overlay color */ height: 100%; max-width: unset; padding: 0; opacity: 0; } .gallery-caption-wrapper { display: flex; align-items: center; /* center vertically */ justify-content: center; /* center horizontally */ } .gallery-caption-content { font-size: 1rem !important; /* caption font size */ color: white; /*caption font color */ } .gallery-grid-item { position: relative; } .gallery-grid-item:hover .gallery-caption { opacity: 1; } .gallery-caption-grid-simple { transition-delay: 0ms; }  
×
×
  • 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.