image with hover text

/* add a block/column and give it this class: stacked */

.stacked {
    display: grid;
    place-items: end center;
    isolation: isolate;
    --animation: all 350ms ease-in-out;
}
.stacked > * {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}
.stacked::before {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    transition: var(--animation);
}
.stacked:hover::before {
    opacity: 1;
}
.stacked > [data-pf-type="Image"], .stacked > [data-pf-type="ProductMedia"] {
    z-index: -1;
}
.stacked > [data-pf-type="Heading"], .stacked > [data-pf-type="Paragraph"] {
    transform: translateY(100%);
    opacity: 0;
    transition: var(--animation);
    visibility: hidden;
}
.stacked:hover > [data-pf-type="Heading"], .stacked:hover > [data-pf-type="Paragraph"] {
    transform: translateY(0%);
    opacity: 1;
    visibility: visible;
}