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

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";
}

Add to Design > Custom CSS

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

Thank you, tuanphan!