Gallery Grid Hover 01

Description

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

Initial:

Hover:

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

<style>
.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;
    
}

figcaption.gallery-caption.gallery-caption-grid-simple {
    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 figcaption.gallery-caption.gallery-caption-grid-simple {
    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;
}
}
</style>

#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="https://google.com">jeffsum.com</a>
</p>

#3. Make sure this option is enabled