<style>
/* Show Text on Hover plugin by opsquare.co */
:root {
  --op-show-alt-text--bg: rgba(0,0,0, 0.7);
  --op-show-alt-text--color: #ffffff;
  --op-show-alt-text--transition: opacity 0.7s ease;
  --op-show-alt-text--padding: 16px;
  --op-show-alt-text--align: center;
}

.op-img-alt-ready {
  position: relative;
  overflow: hidden;
}
.op-img-alt-ready .op-img-alt-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: var(--op-show-alt-text--align);
  text-align: var(--op-show-alt-text--align);
  padding: var(--op-show-alt-text--padding);
  background: var(--op-show-alt-text--bg);
  z-index: 1;
  opacity: 0;
  transition: var(--op-show-alt-text--transition);
  pointer-events: none;
}
.op-img-alt-ready .op-img-alt-overlay > * {
  color: var(--op-show-alt-text--color);
  opacity: 0;
  transition: var(--op-show-alt-text--transition);
  pointer-events: none;
  margin: 0;
  opacity: 1;
}
.op-img-alt-ready:hover .op-img-alt-overlay {
  opacity: 1;
}
</style>

<script>
/* Show Text on Hover plugin by opsquare.co */
function opShowTextOnHover(scope, opts = {}) {
    if (typeof scope === 'object' && scope !== null) { opts = scope; scope = ''; }

    const { tag = 'p', removeAlt = true } = opts;

    function applyOverlay(img) {
        const alt = img.getAttribute('alt')?.trim();
        if (!alt) return;

        const wrapper = img.closest('.fluid-image-container ');
        if (!wrapper) return;
        if (wrapper.querySelector('.op-img-alt-overlay')) return;

        wrapper.classList.add('op-img-alt-ready');

        const overlay = document.createElement('div');
        overlay.className = 'op-img-alt-overlay';

        const text = document.createElement(tag);
        text.textContent = alt;
        overlay.appendChild(text);

        wrapper.appendChild(overlay);

        if (removeAlt) img.removeAttribute('alt');
    }

    document.addEventListener('DOMContentLoaded', () => {
        if (window.frameElement !== null) return;

        const root = scope ? document.querySelector(scope) : document;
        if (!root) return;

        root.querySelectorAll('img').forEach(applyOverlay);
    });
}


opShowTextOnHover({tag: 'h3'});
</script>