gallery-caption { position: absolute; top: 0; left: 0; /* You can replace the color here with a different color */ background-color: rgba(255,255,255,0.7); 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: #000000; /* You can change the color of your image caption here */ font-size: 22px !important; font-weight: 400; } .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; } /* The code below is optional, all it does is have the titles display by default on mobile since mobile doesn't have a "hover" */ @media only screen and (max-width: 640px) { .gallery-grid-item .gallery-caption { opacity: 1; } .gallery-grid-item .gallery-caption { background: rgba(255,255,255,0.4) !important; } .gallery-grid-item:hover .gallery-caption { background-color: unset !important; } }

Prints

Featured