Jump to content

How can I show gallery image information on first click, not hover?

Recommended Posts

Site URL: http://www.roqlarue.com/current-exhibition

I would like to make the details for a gallery image be shown when a user clicks the image from the main page, not making the user hover or click another link (on mobile) to see the details.

We get so many people who do not understand how to use this functionality and we need to hold their hand through it. Here is the current CSS I have on the page, but I don't know what to effect to make the action reversed.

Any tips would be very welcome! 😃


@media screen and (max-width:640px){ 
a.sqs-lightbox-meta-trigger {
    visibility: hidden;
    width: 100% !important;
a.sqs-lightbox-meta-trigger:before {
    background-color: #ffffff;
  color: #000000;  
  font-size: 30px;
  font-family: "Adobe Garamond Pro", Times New Roman, serif;
    font-style: none;
    font-weight: 400;
      text-transform: none;
    text-decoration: underline;
    border-radius: 0%;
    visibility: visible;
    content:"Details about this piece";

Link to comment

Add to Design > Custom CSS

.yui3-lightbox2 .sqs-lightbox-meta {
    opacity: 1 !important;
    background-color: rgba(0,0,0,.7) !important;


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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.