Buy me a coffee

Gallery Grid Hover 01


  • Initial: show image, no text, no overlay
  • Hover: an overlay slide up, text over overlay


Gallery Grid Hover01 01 Min

Hover:Gallery Grid Hover01 02 Min

#1. Use this code to Page Header Code Injection or Code Block

.gallery-grid[data-width="inset"] h4, .gallery-grid[data-width="inset"] p {
    margin: 0 !important;
.gallery-grid[data-width="inset"] a {
    display: block;
    text-decoration: underline;
} {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    padding: 0 !important;
    background-color: #f1f2f3;
    transition: all 0.7s;
    transform: translateY(300%);

figure {
    position: relative;
  overflow: hidden;

.gallery-caption-wrapper {
    padding: 20px !important;
    width: auto !important;

figure:hover {
    transform: translateY(0);
    transition: all 0.7s ease;
  @media screen and (max-width:991px) {
    figure:hover figcaption {
    position: fixed !important;
    bottom: 0;
    width: 100% !important;
    max-width: 100% !important;
    top: 70% !important;

Gallery Grid Hover01 03 Min

#2. Next, edit the Image Description, using this format

<h4>Jeffsum 01</h4>
<p>Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Hey, you know how I'm, like, always trying to save the planet? Here's my chance
<a href=""></a>


Gallery Grid Hover01 04 Min

#3. Make sure this option is enabled

Gallery Grid Hover01 05 Min