Carrd Gallery image labels

Add custom overlay labels to individual Gallery images, like the one below.

How to implement

1. Create a Gallery and give it an ID (e.g my-gallery)

2. Add an Embed element, set to Hidden and Head and add this code:

<style>
#my-gallery .frame {
position: relative;
display: block;
overflow: hidden;
}
#my-gallery .frame[data-label]:not([data-label=""])::after {
content: attr(data-label);
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
padding: 10px 14px;
width: 100px;
font-family: sans-serif;
background: orange;
color: #ffffff;
font-size: 0.9rem;
font-weight: 500;
text-align: center;
pointer-events: none;
}
</style><script>
function applyGalleryLabels() {
const images = document.querySelectorAll('#my-gallery img');
images.forEach(img => {
const rawAlt = img.getAttribute('alt') || '';
const trimmedAlt = rawAlt.trim();
const frame = img.closest('.frame');
const ignoredValues = ['untitled', 'untitled site', 'image', 'photo'];
if (frame) {
if (trimmedAlt && !ignoredValues.includes(trimmedAlt.toLowerCase())) {
frame.setAttribute('data-label', trimmedAlt);
} else {
frame.removeAttribute('data-label');
}
}
});
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', applyGalleryLabels);
} else {
applyGalleryLabels();
}
window.addEventListener('load', applyGalleryLabels);
</script>

3. Add your label as the Alt text on any image

Note: The labels will only show on the published site, not in the Carrd editor.

How to edit the label styling

You can change the stylings in the <style> section of the code.

  • To change label width edit width

  • To change label background edit background

  • To change font edit font-family

  • To change text color edit color

  • To change text size edit font-size

  • To change font weight edit font-weight

  • To change position edit bottom

  • To change left/right edit left and right

Made by Mark for codefor.carrd.co