diff --git a/src/components/examples.js b/src/components/examples.js
index 02a8dbf39..1709228a2 100644
--- a/src/components/examples.js
+++ b/src/components/examples.js
@@ -22,6 +22,7 @@ import links from 'componentsdir/link/examples/Links.vue';
 import list from 'componentsdir/list/examples/Lists.vue';
 import mediaObject from 'componentsdir/mediaObject/examples/MediaObject.vue';
 import modal from 'componentsdir/modal/examples/Modal.vue';
+import objectOverlay from 'componentsdir/objectOverlay/examples/ObjectOverlay.vue';
 import pagination from 'componentsdir/pagination/examples/Pagination.vue';
 import picture from 'componentsdir/picture/examples/Picture.vue';
 import popover from 'componentsdir/popover/examples/Popover.vue';
@@ -70,6 +71,7 @@ export default {
   list,
   mediaObject,
   modal,
+  objectOverlay,
   pagination,
   picture,
   popover,
diff --git a/src/components/objectOverlay/CdrObjectOverlay.vue b/src/components/objectOverlay/CdrObjectOverlay.vue
new file mode 100644
index 000000000..06954793d
--- /dev/null
+++ b/src/components/objectOverlay/CdrObjectOverlay.vue
@@ -0,0 +1,227 @@
+<script setup lang="ts">
+import { useCssModule, computed, ref, onMounted, nextTick } from 'vue';
+import type { ObjectOverlayProps } from '../../types/interfaces';
+
+/** Component for positioning content in 9 different positions relative to a container */
+
+defineOptions({ name: 'CdrObjectOverlay' });
+
+const props = withDefaults(defineProps<ObjectOverlayProps>(), {
+  position: 'center-center',
+  margin: 'zero',
+  tag: 'div',
+  gradientTheme: 'dark'
+});
+
+// Refs for DOM elements
+const containerRef = ref<HTMLElement | null>(null);
+const overlayRef = ref<HTMLElement | null>(null);
+
+// Helper function to determine gradient direction based on position
+const getGradientDirection = (position: string): string | null => {
+  if (position === 'center-center') return null;
+  
+  if (['left-top', 'center-top', 'right-top'].includes(position)) {
+    return 'to-bottom';
+  } else if (position === 'left-center') {
+    return 'to-right';
+  } else if (position === 'right-center') {
+    return 'to-left';
+  } else if (['left-bottom', 'center-bottom', 'right-bottom'].includes(position)) {
+    return 'to-top';
+  }
+  
+  return null;
+};
+
+// Helper function to process component properties (position, withGradient)
+const processComponentProperty = (property: string, prop: any): Record<string, string> => {
+  const result: Record<string, string> = {};
+  
+  try {
+    if (typeof prop === 'string') {
+      result[`data-${property}`] = prop;
+    } else if (typeof prop === 'object' && prop !== null) {
+      Object.entries(prop).forEach(([mq, value]) => {
+        if (mq === 'xs') {
+          result[`data-${property}`] = String(value);
+        } else {
+          result[`data-${property}-${mq}`] = String(value);
+        }
+      });
+    }
+  } catch (error) {
+    console.error(`Error processing ${property}:`, error);
+  }
+  
+  return result;
+};
+
+// Helper function to create CSS variable references
+const createCssVar = (space: string): string => `var(--cdr-space-${space})`;
+
+// Helper function to process content properties (margin, padding)
+const processContentProperty = (
+  property: string, 
+  prop: string | string[] | Record<string, string | string[]>,
+  existingStyle: Record<string, string> = {}
+): Record<string, string> => {
+  const style = { ...existingStyle };
+  
+  try {
+    if (typeof prop === 'string') {
+      style[`--${property}`] = createCssVar(prop);
+    } else if (Array.isArray(prop)) {
+      style[`--${property}`] = prop.map(createCssVar).join(' ');
+    } else if (typeof prop === 'object' && prop !== null) {
+      Object.entries(prop).forEach(([mq, value]) => {
+        const val = typeof value === 'string' 
+          ? createCssVar(value)
+          : (value as string[]).map(createCssVar).join(' ');
+
+        style[`--${property}-${mq}`] = val;
+      });
+    }
+  } catch (error) {
+    console.error(`Error processing ${property}:`, error);
+  }
+  
+  return style;
+};
+
+const attrs = computed(() => {
+  const component: Record<string, string> = {};
+  const content: Record<string, any> = { style: {} };
+
+  // Process position property
+  if (props.position) {
+    Object.assign(component, processComponentProperty('position', props.position));
+  }
+  
+  // Process gradient based on position if withGradient is true
+  if (props.withGradient) {
+    // Set gradient theme
+    if (props.gradientTheme) {
+      component['data-gradient-theme'] = props.gradientTheme;
+    }
+    
+    // For responsive positions, we need to determine gradient for each breakpoint
+    if (typeof props.position === 'object') {
+      Object.entries(props.position).forEach(([mq, pos]) => {
+        const direction = getGradientDirection(pos as string);
+        if (direction) {
+          if (mq === 'xs') {
+            component['data-gradient'] = direction;
+          } else {
+            component[`data-gradient-${mq}`] = direction;
+          }
+        }
+      });
+    } else {
+      // For single position value
+      const direction = getGradientDirection(props.position as string);
+      if (direction) {
+        component['data-gradient'] = direction;
+      }
+    }
+  }
+
+  // Process content properties
+  ['margin', 'padding'].forEach((property) => {
+    const prop = props[property as keyof typeof props];
+    if (prop) {
+      content.style = processContentProperty(
+        property, 
+        prop as string | string[] | Record<string, string | string[]>,
+        content.style
+      );
+    }
+  });
+
+  return {
+    component,
+    content
+  };
+});
+
+// Function to inherit border radius from container
+const inheritBorderRadius = () => {
+  if (!containerRef.value || !overlayRef.value) return;
+  
+  // Get the first child of the container (the actual content element)
+  const containerContent = containerRef.value.firstElementChild as HTMLElement;
+  if (!containerContent) return;
+  
+  requestAnimationFrame(() => {
+    // Get computed style of the container content
+    const computedStyle = window.getComputedStyle(containerContent);
+    const borderRadius = computedStyle.borderRadius;
+
+    if (!overlayRef.value) return;
+    
+    // Apply the same border radius to the overlay component
+    if (borderRadius && borderRadius !== '0px') {
+      overlayRef.value.style.borderRadius = borderRadius;
+    } else {
+      // Try to get border-radius from individual properties if the shorthand is not set
+      const topLeft = computedStyle.borderTopLeftRadius;
+      const topRight = computedStyle.borderTopRightRadius;
+      const bottomLeft = computedStyle.borderBottomLeftRadius;
+      const bottomRight = computedStyle.borderBottomRightRadius;
+      
+      if (
+        topLeft !== '0px' || topRight !== '0px' || bottomLeft !== '0px' || bottomRight !== '0px'
+      ) {
+        overlayRef.value.style.borderTopLeftRadius = topLeft;
+        overlayRef.value.style.borderTopRightRadius = topRight;
+        overlayRef.value.style.borderBottomLeftRadius = bottomLeft;
+        overlayRef.value.style.borderBottomRightRadius = bottomRight;
+      }
+    }
+  }); // Small delay to ensure styles are applied
+};
+
+// Apply border radius after component is mounted and when it updates
+onMounted(() => {
+  nextTick(inheritBorderRadius);
+  
+  // Set up MutationObserver to detect when children are added/changed
+  if (containerRef.value) {
+    const observer = new MutationObserver(inheritBorderRadius);
+    observer.observe(containerRef.value, { 
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['style', 'class']
+    });
+  }
+});
+
+const styles = useCssModule();
+</script>
+
+<template>
+  <component
+    :is="tag"
+    :class="styles['cdr-object-overlay']"
+    v-bind="attrs.component"
+    ref="overlayRef"
+  >
+    <div
+      :class="styles['cdr-object-overlay__container']"
+      ref="containerRef"
+    >
+      <!-- @slot Container content that the overlay will be positioned relative to -->
+      <slot name="container" />
+    </div>
+    <div
+      :class="styles['cdr-object-overlay__content']"
+      v-bind="attrs.content"
+    >
+      <!-- @slot Content to be positioned -->
+      <slot name="content" />
+    </div>
+  </component>
+</template>
+
+<style lang="scss" module src="./styles/CdrObjectOverlay.module.scss" />
\ No newline at end of file
diff --git a/src/components/objectOverlay/__tests__/CdrObjectOverlay.spec.js b/src/components/objectOverlay/__tests__/CdrObjectOverlay.spec.js
new file mode 100644
index 000000000..0cb7eb265
--- /dev/null
+++ b/src/components/objectOverlay/__tests__/CdrObjectOverlay.spec.js
@@ -0,0 +1,229 @@
+import { mount } from '../../../../test/vue-jest-style-workaround.js';
+import CdrObjectOverlay from '../CdrObjectOverlay.vue';
+
+describe('CdrObjectOverlay.vue', () => {
+  describe('default rendering', () => {
+    let wrapper;
+    let elem;
+
+    beforeEach(() => {
+      elem = document.createElement('div');
+      document.body.appendChild(elem);
+      wrapper = mount(CdrObjectOverlay, {
+        props: {},
+        slots: {
+          container: '<div class="container-slot">Container Content</div>',
+          content: '<div class="content-slot">Overlay Content</div>',
+        },
+        attachTo: elem,
+      });
+    });
+
+    afterEach(() => {
+      wrapper.unmount();
+      elem.remove();
+    });
+
+    it('renders correctly with default props', () => {
+      // Default tag is "div"
+      expect(wrapper.element.tagName).toBe('DIV');
+      // Check default data attribute for position
+      expect(wrapper.attributes('data-position')).toBe('center-center');
+      // Verify that the "container" and "content" slots are rendered properly
+      const containerSlot = wrapper.find('.cdr-object-overlay__container');
+      expect(containerSlot.exists()).toBe(true);
+      expect(containerSlot.text()).toContain('Container Content');
+
+      const contentSlot = wrapper.find('.cdr-object-overlay__content');
+      expect(contentSlot.exists()).toBe(true);
+      expect(contentSlot.text()).toContain('Overlay Content');
+      // Check that content has default margin style
+      expect(contentSlot.attributes('style')).toContain('--margin: var(--cdr-space-zero)');
+    });
+
+    it('matches the snapshot', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
+  });
+
+  describe('prop handling', () => {
+    it('applies the correct data attribute for each position', () => {
+      const positions = [
+        'top-left',
+        'top-center',
+        'top-right',
+        'center-left',
+        'center-center',
+        'center-right',
+        'bottom-left',
+        'bottom-center',
+        'bottom-right',
+      ];
+      positions.forEach((position) => {
+        const wrapper = mount(CdrObjectOverlay, {
+          props: { position },
+          slots: {
+            container: '<div>Container</div>',
+            content: '<div>Content</div>',
+          },
+        });
+        expect(wrapper.attributes('data-position')).toBe(position);
+        wrapper.unmount();
+      });
+    });
+
+    it('applies margin through CSS variables', () => {
+      const wrapper = mount(CdrObjectOverlay, {
+        props: { margin: 'half-x' },
+        slots: {
+          container: '<div>Container</div>',
+          content: '<div>Content</div>',
+        },
+      });
+      const contentEl = wrapper.find('.cdr-object-overlay__content');
+      expect(contentEl.attributes('style')).toContain('--margin: var(--cdr-space-half-x)');
+      wrapper.unmount();
+    });
+
+    it('applies padding through CSS variables', () => {
+      const wrapper = mount(CdrObjectOverlay, {
+        props: { padding: 'half-x' },
+        slots: {
+          container: '<div>Container</div>',
+          content: '<div>Content</div>',
+        },
+      });
+      const contentEl = wrapper.find('.cdr-object-overlay__content');
+      expect(contentEl.attributes('style')).toContain('--padding: var(--cdr-space-half-x)');
+      wrapper.unmount();
+    });
+
+    it('handles responsive position values', () => {
+      const wrapper = mount(CdrObjectOverlay, {
+        props: { 
+          position: { 
+            xs: 'center-center', 
+            lg: 'bottom-right' 
+          } 
+        },
+        slots: {
+          container: '<div>Container</div>',
+          content: '<div>Content</div>',
+        },
+      });
+      expect(wrapper.attributes('data-position')).toBe('center-center');
+      expect(wrapper.attributes('data-position-lg')).toBe('bottom-right');
+      wrapper.unmount();
+    });
+
+    it('handles responsive margin values', () => {
+      const wrapper = mount(CdrObjectOverlay, {
+        props: { 
+          margin: { 
+            xs: 'zero', 
+            lg: 'half-x' 
+          } 
+        },
+        slots: {
+          container: '<div>Container</div>',
+          content: '<div>Content</div>',
+        },
+      });
+      const contentEl = wrapper.find('.cdr-object-overlay__content');
+      expect(contentEl.attributes('style')).toContain('--margin-xs: var(--cdr-space-zero)');
+      expect(contentEl.attributes('style')).toContain('--margin-lg: var(--cdr-space-half-x)');
+      wrapper.unmount();
+    });
+
+    it('uses a custom HTML tag when the "tag" prop is specified', () => {
+      const wrapper = mount(CdrObjectOverlay, {
+        props: { tag: 'section' },
+        slots: {
+          container: '<div>Container</div>',
+          content: '<div>Content</div>',
+        },
+      });
+      expect(wrapper.element.tagName).toBe('SECTION');
+      wrapper.unmount();
+    });
+
+    // New tests for gradientTheme
+    it('applies dark gradient theme by default when withGradient is true', () => {
+      const wrapper = mount(CdrObjectOverlay, {
+        props: { 
+          withGradient: true,
+          position: 'left-top'
+        },
+        slots: {
+          container: '<div>Container</div>',
+          content: '<div>Content</div>',
+        },
+      });
+      expect(wrapper.attributes('data-gradient')).toBe('to-bottom');
+      expect(wrapper.attributes('data-gradient-theme')).toBe('dark');
+      wrapper.unmount();
+    });
+
+    it('applies light gradient theme when specified', () => {
+      const wrapper = mount(CdrObjectOverlay, {
+        props: { 
+          withGradient: true,
+          gradientTheme: 'light',
+          position: 'left-top'
+        },
+        slots: {
+          container: '<div>Container</div>',
+          content: '<div>Content</div>',
+        },
+      });
+      expect(wrapper.attributes('data-gradient')).toBe('to-bottom');
+      expect(wrapper.attributes('data-gradient-theme')).toBe('light');
+      wrapper.unmount();
+    });
+
+    it('applies correct gradient direction based on position with light theme', () => {
+      const positionsAndDirections = [
+        { position: 'left-top', direction: 'to-bottom' },
+        { position: 'center-top', direction: 'to-bottom' },
+        { position: 'right-top', direction: 'to-bottom' },
+        { position: 'left-center', direction: 'to-right' },
+        { position: 'right-center', direction: 'to-left' },
+        { position: 'left-bottom', direction: 'to-top' },
+        { position: 'center-bottom', direction: 'to-top' },
+        { position: 'right-bottom', direction: 'to-top' },
+      ];
+
+      positionsAndDirections.forEach(({ position, direction }) => {
+        const wrapper = mount(CdrObjectOverlay, {
+          props: { 
+            withGradient: true,
+            gradientTheme: 'light',
+            position
+          },
+          slots: {
+            container: '<div>Container</div>',
+            content: '<div>Content</div>',
+          },
+        });
+        expect(wrapper.attributes('data-gradient')).toBe(direction);
+        expect(wrapper.attributes('data-gradient-theme')).toBe('light');
+        wrapper.unmount();
+      });
+    });
+
+    it('does not apply gradient when position is center-center', () => {
+      const wrapper = mount(CdrObjectOverlay, {
+        props: { 
+          withGradient: true,
+          position: 'center-center'
+        },
+        slots: {
+          container: '<div>Container</div>',
+          content: '<div>Content</div>',
+        },
+      });
+      expect(wrapper.attributes('data-gradient')).toBeUndefined();
+      wrapper.unmount();
+    });
+  });
+});
\ No newline at end of file
diff --git a/src/components/objectOverlay/__tests__/__snapshots__/CdrObjectOverlay.spec.js.snap b/src/components/objectOverlay/__tests__/__snapshots__/CdrObjectOverlay.spec.js.snap
new file mode 100644
index 000000000..0fafd137c
--- /dev/null
+++ b/src/components/objectOverlay/__tests__/__snapshots__/CdrObjectOverlay.spec.js.snap
@@ -0,0 +1,34 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`CdrObjectOverlay.vue > default rendering > matches the snapshot 1`] = `
+<div
+  class="cdr-object-overlay"
+  data-position="center-center"
+>
+  <div
+    class="cdr-object-overlay__container"
+  >
+    <!-- @slot Container content that the overlay will be positioned relative to -->
+    
+    <div
+      class="container-slot"
+    >
+      Container Content
+    </div>
+    
+  </div>
+  <div
+    class="cdr-object-overlay__content"
+    style="--margin: var(--cdr-space-zero);"
+  >
+    <!-- @slot Content to be positioned -->
+    
+    <div
+      class="content-slot"
+    >
+      Overlay Content
+    </div>
+    
+  </div>
+</div>
+`;
diff --git a/src/components/objectOverlay/examples/ObjectOverlay.vue b/src/components/objectOverlay/examples/ObjectOverlay.vue
new file mode 100644
index 000000000..20fadf0ba
--- /dev/null
+++ b/src/components/objectOverlay/examples/ObjectOverlay.vue
@@ -0,0 +1,242 @@
+<script setup lang="ts">
+import CdrObjectOverlay from '../CdrObjectOverlay.vue';
+import CdrMediaObject from '../../mediaObject/CdrMediaObject.vue';
+import CdrImg from '../../image/CdrImg.vue';
+import CdrButton from '../../button/CdrButton.vue';
+import CdrIcon from '../../icon/CdrIcon.vue';
+
+defineOptions({ name: 'ObjectOverlay' });
+
+</script>
+
+<template>
+  <div class="example">
+    <h2>Media Object with Overlay</h2>
+
+    <hr class="example__hr" />
+
+  <CdrObjectOverlay :position="{ xs: 'center-top', md: 'right-center', lg: 'center-bottom' }" :margin="['zero', 'eighth-x']" :with-gradient="true">
+    <template #container>
+      <img src="https://placehold.co/600x400" width="100%" height="100%" alt="Background image" :style="{ display: 'block' }"/>
+    </template>
+    <template #content>
+      <div class="overlay-content" :style="{ padding: '20px' }">
+        Positioned Content
+      </div>
+    </template>
+  </CdrObjectOverlay>
+
+    <h2>Media Object with Multiple Overlays</h2>
+    <CdrMediaObject>
+      <template #media>
+        <CdrObjectOverlay position="left-top" margin="zero" :with-gradient="true">
+          <template #container>
+            <CdrImg src="https://placehold.co/600x400" width="100%" height="100%" alt="Media image" radius="soft" />
+          </template>
+          <template #content>
+            <div class="overlay-content">
+              Top Left Overlay
+            </div>
+          </template>
+        </CdrObjectOverlay>
+        <CdrObjectOverlay position="right-bottom" margin="zero" :with-gradient="true">
+          <template #container>
+            <CdrImg src="https://placehold.co/600x400" width="100%" height="100%" alt="Media image" radius="soft" />
+          </template>
+          <template #content>
+            <div class="overlay-content">
+              Bottom Right Overlay
+            </div>
+          </template>
+        </CdrObjectOverlay>
+      </template>
+      <template #content>
+        <div>
+          <h3>Media Object Title</h3>
+          <p>This is the content of the media object.</p>
+        </div>
+      </template>
+    </CdrMediaObject>
+
+    <hr />
+
+    <h2>Media Object with Responsive Overlay</h2>
+    <CdrMediaObject>
+      <template #media>
+        <CdrObjectOverlay :position="{ xs: 'left-top', md: 'center-center', lg: 'right-bottom' }" margin="zero" :with-gradient="true" gradient-theme="light">
+          <template #container>
+            <CdrImg src="https://placehold.co/600x400" width="100%" height="100%" alt="Media image" radius="soft" />
+          </template>
+          <template #content>
+            <div class="overlay-content">
+              Responsive Overlay
+            </div>
+          </template>
+        </CdrObjectOverlay>
+      </template>
+      <template #content>
+        <div>
+          <h3>Media Object Title</h3>
+          <p>This is the content of the media object.</p>
+        </div>
+      </template>
+    </CdrMediaObject>
+
+    <hr />
+
+    <h2>Media Object with Multiple Overlays and Content</h2>
+    <CdrMediaObject>
+      <template #media>
+        <CdrObjectOverlay position="left-top" margin="zero" :with-gradient="true">
+          <template #container>
+            <CdrImg src="https://placehold.co/600x400" width="100%" height="100%" alt="Media image" radius="soft" />
+          </template>
+          <template #content>
+            <CdrButton icon-only aria-label="Close">
+              <CdrIcon name="close" />
+            </CdrButton>
+          </template>
+        </CdrObjectOverlay>
+        <CdrObjectOverlay position="right-bottom" margin="zero" :with-gradient="true">
+          <template #container>
+            <CdrImg src="https://placehold.co/600x400" width="100%" height="100%" alt="Media image" radius="soft" />
+          </template>
+          <template #content>
+            <div class="overlay-content">
+              Bottom Right Overlay
+            </div>
+          </template>
+        </CdrObjectOverlay>
+        <CdrObjectOverlay position="center-center" margin="zero" :with-gradient="true">
+          <template #container>
+            <CdrImg src="https://placehold.co/600x400" width="100%" height="100%" alt="Media image" radius="soft" />
+          </template>
+          <template #content>
+            <div class="overlay-content">
+              Center Overlay
+            </div>
+          </template>
+        </CdrObjectOverlay>
+      </template>
+      <template #content>
+        <div>
+          <h3>Media Object Title</h3>
+          <p>This is the content of the media object.</p>
+        </div>
+      </template>
+    </CdrMediaObject>
+
+    <hr />
+
+    <h2>Media Object with Square Image</h2>
+    <CdrMediaObject>
+      <template #media>
+        <CdrObjectOverlay position="center-center" margin="zero" :with-gradient="true">
+          <template #container>
+            <CdrImg src="https://placehold.co/600x600" width="100%" height="100%" alt="Square media image" radius="soft" />
+          </template>
+          <template #content>
+            <div class="overlay-content">
+              Center Overlay
+            </div>
+          </template>
+        </CdrObjectOverlay>
+      </template>
+      <template #content>
+        <div>
+          <h3>Media Object Title</h3>
+          <p>This is the content of the media object.</p>
+        </div>
+      </template>
+    </CdrMediaObject>
+
+    <hr />
+
+    <h2>Media Object with Tall Image</h2>
+    <CdrMediaObject>
+      <template #media>
+        <CdrObjectOverlay position="center-center" margin="zero" :with-gradient="true">
+          <template #container>
+            <CdrImg src="https://placehold.co/400x800" width="100%" height="100%" alt="Tall media image" radius="soft" />
+          </template>
+          <template #content>
+            <div class="overlay-content">
+              Center Overlay
+            </div>
+          </template>
+        </CdrObjectOverlay>
+      </template>
+      <template #content>
+        <div>
+          <h3>Media Object Title</h3>
+          <p>This is the content of the media object.</p>
+        </div>
+      </template>
+    </CdrMediaObject>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import '@rei/cdr-tokens/dist/rei-dot-com/scss/cdr-tokens.scss';
+
+.overlay-content {
+  color: white;
+  font-size: 1.5rem;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background for contrast */
+}
+
+.image-container {
+  position: relative;
+  overflow: hidden;
+  border-radius: 8px; /* Match the radius of the image */
+}
+
+.example {
+  &__hr {
+    margin: $cdr-space-two-x 0;
+  }
+
+  &__container {
+    max-width: 1300px;
+  }
+
+  &__content {
+    &--color-inverse {
+      color: $cdr-color-text-inverse;
+    }
+
+    &--narrow {
+      max-width: 50%;
+    }
+  }
+
+  &__image {
+    &--height {
+      height: 200px;
+      width: 100%;
+      object-fit: cover;
+    }
+
+    &--11 {
+      height: 100%;
+      width: 100%;
+    }
+
+    &--badge {
+      position: absolute;
+      top: 20px;
+      left: 0;
+      border: 1px solid red;
+    }
+
+    &--soft-radius {
+      border-radius: 8px; /* Apply soft radius to images */
+    }
+  }
+
+  &__badge-example {
+    position: relative;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/objectOverlay/styles/CdrObjectOverlay.module.scss b/src/components/objectOverlay/styles/CdrObjectOverlay.module.scss
new file mode 100644
index 000000000..7ae7ec0e5
--- /dev/null
+++ b/src/components/objectOverlay/styles/CdrObjectOverlay.module.scss
@@ -0,0 +1,133 @@
+@use 'sass:map';
+@import '../../../styles/settings/index';
+
+$breakpoints: (
+  '': '',
+  '-sm': $cdr-breakpoint-sm,
+  '-md': $cdr-breakpoint-md,
+  '-lg': $cdr-breakpoint-lg
+);
+
+$positions: (
+  'left-top': (top: 0, left: 0, transform: none),
+  'center-top': (top: 0, left: 50%, transform: translateX(-50%)),
+  'right-top': (top: 0, right: 0, transform: none),
+  'left-center': (top: 50%, left: 0, transform: translateY(-50%)),
+  'center-center': (top: 50%, left: 50%, transform: translate(-50%, -50%)),
+  'right-center': (top: 50%, right: 0, transform: translateY(-50%)),
+  'left-bottom': (bottom: 0, left: 0, transform: none),
+  'center-bottom': (bottom: 0, left: 50%, transform: translateX(-50%)),
+  'right-bottom': (bottom: 0, right: 0, transform: none)
+);
+
+// Dark theme gradients (default)
+$dark-gradients: (
+  'to-top': linear-gradient(to top, black 0%, rgba(0, 0, 0, 0.5) 20%, transparent 40%),
+  'to-bottom': linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0.5) 20%, transparent 40%),
+  'to-left': linear-gradient(to left, black 0%, rgba(0, 0, 0, 0.5) 20%, transparent 40%),
+  'to-right': linear-gradient(to right, black 0%, rgba(0, 0, 0, 0.5) 20%, transparent 40%)
+);
+
+// Light theme gradients
+$light-gradients: (
+  'to-top': linear-gradient(to top, white 0%, rgba($cdr-color-background-primary, 0.5) 20%, transparent 40%),
+  'to-bottom': linear-gradient(to bottom, white 0%, rgba($cdr-color-background-primary, 0.5) 20%, transparent 40%),
+  'to-left': linear-gradient(to left, white 0%, rgba($cdr-color-background-primary, 0.5) 20%, transparent 40%),
+  'to-right': linear-gradient(to right, white 0%, rgba($cdr-color-background-primary, 0.5) 20%, transparent 40%)
+);
+
+.cdr-object-overlay {
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  &__container {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  &__content {
+    position: absolute;
+    margin: var(--margin);
+    padding: var(--padding);
+    z-index: 2;
+
+    @each $breakpoint-suffix, $min-width in $breakpoints {
+      @if $breakpoint-suffix != '' {
+        @media (min-width: $min-width) {
+          margin: var(--margin#{$breakpoint-suffix}, var(--margin));
+          padding: var(--padding#{$breakpoint-suffix}, var(--padding));
+        }
+      }
+    }
+  }
+
+  // Create a mixin for breakpoints
+  @mixin at-breakpoint($breakpoint) {
+    @if $breakpoint == '' {
+      @content;
+    } @else {
+      @media (min-width: map.get($breakpoints, $breakpoint)) {
+        @content;
+      }
+    }
+  }
+
+  // Generate positions for all breakpoints
+  @each $breakpoint-suffix, $min-width in $breakpoints {
+    @include at-breakpoint($breakpoint-suffix) {
+      // Position
+      @each $position, $properties in $positions {
+        $selector: if($breakpoint-suffix == '', 
+                     '[data-position="#{$position}"]', 
+                     '[data-position#{$breakpoint-suffix}="#{$position}"]');
+                     
+        &#{$selector} &__content {
+          @each $prop, $value in $properties {
+            #{$prop}: $value;
+          }
+          // Set unused positions to auto
+          @each $side in top, right, bottom, left {
+            @if not map-has-key($properties, $side) {
+              #{$side}: auto;
+            }
+          }
+        }
+      }
+
+      // Dark theme gradients (default)
+      @each $gradient, $direction in $dark-gradients {
+        $selector: if($breakpoint-suffix == '', 
+                     '[data-gradient="#{$gradient}"]', 
+                     '[data-gradient#{$breakpoint-suffix}="#{$gradient}"]');
+                     
+        &#{$selector}:not([data-gradient-theme="light"])::before {
+          background-image: $direction;
+          border-radius: inherit;
+          display: block;
+          content: '';
+          position: absolute;
+          inset: 0;
+        }
+      }
+
+      // Light theme gradients
+      @each $gradient, $direction in $light-gradients {
+        $selector: if($breakpoint-suffix == '', 
+                     '[data-gradient="#{$gradient}"]', 
+                     '[data-gradient#{$breakpoint-suffix}="#{$gradient}"]');
+                     
+        &#{$selector}[data-gradient-theme="light"]::before {
+          background-image: $direction;
+          border-radius: inherit;
+          display: block;
+          content: '';
+          position: absolute;
+          inset: 0;
+        }
+      }
+    }
+  }
+}
diff --git a/src/dev/router.js b/src/dev/router.js
index 8bf672da5..bc7ed085e 100644
--- a/src/dev/router.js
+++ b/src/dev/router.js
@@ -42,6 +42,7 @@ const routes = [
   { path: '/links', name: 'Links', component: Examples.links },
   { path: '/lists', name: 'Lists', component: Examples.list },
   { path: '/mediaObject', name: 'Media Object', component: Examples.mediaObject },
+  { path: '/object-overlay', name: 'Object Overlay', component: Examples.objectOverlay },
   { path: '/modals', name: 'Modals', component: Examples.modal },
   { path: '/pagination', name: 'Pagination', component: Examples.pagination },
   { path: '/picture', name: 'Picture', component: Examples.picture },
diff --git a/src/lib.ts b/src/lib.ts
index 4ad55daed..6cace409a 100644
--- a/src/lib.ts
+++ b/src/lib.ts
@@ -28,6 +28,7 @@ export { default as CdrLink } from './components/link/CdrLink.vue';
 export { default as CdrList } from './components/list/CdrList.vue';
 export { default as CdrMediaObject } from './components/mediaObject/CdrMediaObject.vue';
 export { default as CdrModal } from './components/modal/CdrModal.vue';
+export { default as CdrObjectOverlay } from './components/objectOverlay/CdrObjectOverlay.vue';
 export { default as CdrPagination } from './components/pagination/CdrPagination.vue';
 export { default as CdrPicture } from './components/picture/CdrPicture.vue';
 export { default as CdrPopover } from './components/popover/CdrPopover.vue';
diff --git a/src/types/interfaces.ts b/src/types/interfaces.ts
index d7a1e1658..6500804e2 100644
--- a/src/types/interfaces.ts
+++ b/src/types/interfaces.ts
@@ -3,7 +3,6 @@ import type {
   Tag,
   Space,
   SpaceFixed,
-  SpaceOption,
   Shadow,
   Radius,
   BorderColor,
@@ -17,7 +16,7 @@ import type {
   Position,
   Alignment,
   AlignmentValue,
-  MediaMeasurement,
+  MediaMeasurement
 } from './other';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -361,7 +360,55 @@ export interface MediaObject extends Layout {
   /**
    * The spacing token to use for padding around the content. This can be an object with values for each Cedar breakpoint (xs, sm, md, lg).
    * @demoSelectMultiple false
-   * @values zero, one-x, two-x, scale-4, scale-3--5
+   * @values zero, one-x, two-x
    */
-  contentPadding?: SpaceOption;
+  contentPadding?: SpaceFixed;
 }
+
+export type ObjectPosition =
+  | 'left-top'
+  | 'center-top'
+  | 'right-top'
+  | 'left-center'
+  | 'center-center'
+  | 'right-center'
+  | 'left-bottom'
+  | 'center-bottom'
+  | 'right-bottom';
+
+export type ResponsivePosition = {
+  xs?: ObjectPosition;
+  sm?: ObjectPosition;
+  md?: ObjectPosition;
+  lg?: ObjectPosition;
+};
+
+export type SpaceTuple =
+  | [SpaceFixed] 
+  | [SpaceFixed, SpaceFixed]
+  | [SpaceFixed, SpaceFixed, SpaceFixed] 
+  | [SpaceFixed, SpaceFixed, SpaceFixed, SpaceFixed];
+
+export type Spacing = SpaceFixed | SpaceTuple;
+
+export type ResponsiveSpace = {
+  xs?: Spacing;
+  sm?: Spacing;
+  md?: Spacing;
+  lg?: Spacing;
+};
+
+export interface ObjectOverlayProps {
+  /** Determines if the container will have a gradient based on position */
+  withGradient?: boolean;
+  /** Theme for the gradient (dark or light) */
+  gradientTheme?: 'dark' | 'light';
+  /** Position of the content relative to the container */
+  position?: ResponsivePosition | ObjectPosition;
+  /** Margin space around the positioned content */
+  margin?: ResponsiveSpace | Spacing;
+  /** Padding space around the positioned content */
+  padding?: ResponsiveSpace | Spacing;
+  /** Sets the HTML tag for the container element */
+  tag?: string;
+}
\ No newline at end of file