diff --git a/packages/vkui/src/components/Image/Image.tsx b/packages/vkui/src/components/Image/Image.tsx
index 1e26477f3d..445c902af8 100644
--- a/packages/vkui/src/components/Image/Image.tsx
+++ b/packages/vkui/src/components/Image/Image.tsx
@@ -108,6 +108,7 @@ const getBorderRadiusBySizeInPx = (
 export const Image: React.FC<ImageProps> & {
   Badge: typeof ImageBadge;
   Overlay: typeof ImageBase.Overlay;
+  FloatElement: typeof ImageBase.FloatElement;
 } = ({
   size = IMAGE_DEFAULT_SIZE,
   borderRadius = 'm',
@@ -175,3 +176,6 @@ Image.Badge.displayName = 'Image.Badge';
 
 Image.Overlay = ImageBase.Overlay;
 Image.Overlay.displayName = 'Image.Overlay';
+
+Image.FloatElement = ImageBase.FloatElement;
+Image.FloatElement.displayName = 'Image.FloatElement';
diff --git a/packages/vkui/src/components/Image/Readme.md b/packages/vkui/src/components/Image/Readme.md
index 2a4de9a214..30d4e0e16f 100644
--- a/packages/vkui/src/components/Image/Readme.md
+++ b/packages/vkui/src/components/Image/Readme.md
@@ -77,6 +77,52 @@ const OthersFeatures = () => {
   );
 };
 
+const WithFloatElements = () => {
+  const [showContextMenu, setShowContextMenu] = useState(true);
+  const [contextMenuOpened, setContextMenuOpened] = useState(false);
+  const [contextMenuVisibility, setContextMenuVisibility] = useState('on-hover');
+
+  return (
+    <Group header={<Header mode="secondary">C позиционированными компонентами</Header>}>
+      <FormLayoutGroup mode="horizontal">
+        <FormItem top="Контекстное меню">
+          <Checkbox
+            checked={showContextMenu}
+            onChange={(e) => setShowContextMenu(e.target.checked)}
+          >
+            Показать контекстное меню
+          </Checkbox>
+        </FormItem>
+        <FormItem top="Контекстное меню">
+          <Select
+            options={[
+              { label: 'Всегда', value: 'always' },
+              { label: 'При наведении на картинку', value: 'on-hover' },
+            ]}
+            value={contextMenuVisibility}
+            disabled={!showContextMenu}
+            onChange={(e) => setContextMenuVisibility(e.target.value)}
+          />
+        </FormItem>
+      </FormLayoutGroup>
+      <Flex margin="auto" gap={'m'}>
+        <Image size={96} src={getAvatarUrl('app_shorm_online')} alt="Приложение шторм онлайн">
+          {showContextMenu && (
+            <Image.FloatElement
+              placement="top-end"
+              inlineIndent="l"
+              blockIndent="l"
+              visibility={contextMenuOpened ? 'always' : contextMenuVisibility}
+            >
+              <ContextMenu onShownChange={setContextMenuOpened} />
+            </Image.FloatElement>
+          )}
+        </Image>
+      </Flex>
+    </Group>
+  );
+};
+
 const Example = () => {
   return (
     <View activePanel="avatar">
@@ -85,6 +131,8 @@ const Example = () => {
         <Default />
         <Responsive />
         <OthersFeatures />
+
+        <WithFloatElements />
       </Panel>
     </View>
   );
@@ -203,5 +251,39 @@ const ImagePropsForm = ({ onBorderRadiusChange, onBadgeChange, onOverlayChange }
   );
 };
 
+const ContextMenu = ({ onShownChange }) => {
+  return (
+    <Popover
+      noStyling
+      trigger="click"
+      role="dialog"
+      onShownChange={onShownChange}
+      content={({ onClose }) => (
+        <div
+          style={{
+            backgroundColor: 'var(--vkui--color_background_modal_inverse)',
+            borderRadius: 8,
+            boxShadow: '0 0 10px rgba(0, 0, 0, 0.3)',
+          }}
+        >
+          <CellButton role="menuitem" before={<Icon28AddOutline />} onClick={onClose}>
+            Добавить
+          </CellButton>
+          <CellButton
+            role="menuitem"
+            before={<Icon28DeleteOutline />}
+            mode="danger"
+            onClick={onClose}
+          >
+            Удалить
+          </CellButton>
+        </div>
+      )}
+    >
+      <Button mode="primary" after={<Icon16MoreHorizontal />}></Button>
+    </Popover>
+  );
+};
+
 <Example />;
 ```
diff --git a/packages/vkui/src/components/ImageBase/ImageBase.tsx b/packages/vkui/src/components/ImageBase/ImageBase.tsx
index 3e4df6101f..d8c1a9f279 100644
--- a/packages/vkui/src/components/ImageBase/ImageBase.tsx
+++ b/packages/vkui/src/components/ImageBase/ImageBase.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useRef } from 'react';
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useExternRef } from '../../hooks/useExternRef';
@@ -8,6 +9,12 @@ import { getFetchPriorityProp } from '../../lib/utils';
 import type { AnchorHTMLAttributesOnly, HasRef, HasRootRef, LiteralUnion } from '../../types';
 import { Clickable } from '../Clickable/Clickable';
 import { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';
+import {
+  type FloatElementIndentation,
+  type FloatElementPlacement,
+  ImageBaseFloatElement,
+  type ImageBaseFloatElementProps,
+} from './ImageBaseFloatElement/ImageBaseFloatElement';
 import { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';
 import { ImageBaseContext } from './context';
 import type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';
@@ -20,6 +27,9 @@ export type {
   ImageBaseBadgeProps,
   ImageBaseOverlayProps,
   ImageBaseContextProps,
+  ImageBaseFloatElementProps,
+  FloatElementPlacement,
+  FloatElementIndentation,
 };
 
 export {
@@ -125,6 +135,7 @@ const sizeToNumber = (size: number | string | undefined): number | undefined =>
 export const ImageBase: React.FC<ImageBaseProps> & {
   Badge: typeof ImageBaseBadge;
   Overlay: typeof ImageBaseOverlay;
+  FloatElement: typeof ImageBaseFloatElement;
 } = ({
   alt,
   crossOrigin,
@@ -150,9 +161,11 @@ export const ImageBase: React.FC<ImageBaseProps> & {
   withTransparentBackground,
   objectFit = 'cover',
   keepAspectRatio = false,
+  getRootRef,
   ...restProps
 }: ImageBaseProps) => {
   const size = sizeProp ?? minOr([sizeToNumber(widthSize), sizeToNumber(heightSize)], defaultSize);
+  const wrapperRef = useExternRef(getRootRef);
 
   const width = widthSize ?? (keepAspectRatio ? undefined : size);
   const height = heightSize ?? (keepAspectRatio ? undefined : size);
@@ -160,6 +173,9 @@ export const ImageBase: React.FC<ImageBaseProps> & {
   const [loaded, setLoaded] = React.useState(false);
   const [failed, setFailed] = React.useState(false);
 
+  const mouseOverHandlersRef = useRef<VoidFunction[]>([]);
+  const mouseOutHandlersRef = useRef<VoidFunction[]>([]);
+
   const hasSrc = src || srcSet;
   const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);
 
@@ -205,8 +221,25 @@ export const ImageBase: React.FC<ImageBaseProps> & {
     [imgRef, loaded],
   );
 
+  const onMouseOver = () => {
+    mouseOverHandlersRef.current.forEach((fn) => fn());
+  };
+
+  const onMouseOut = () => {
+    mouseOutHandlersRef.current.forEach((fn) => fn());
+  };
+
+  const contextValue = React.useMemo(
+    () => ({
+      size,
+      onMouseOverHandlers: mouseOverHandlersRef.current,
+      onMouseOutHandlers: mouseOutHandlersRef.current,
+    }),
+    [size],
+  );
+
   return (
-    <ImageBaseContext.Provider value={{ size }}>
+    <ImageBaseContext.Provider value={contextValue}>
       <Clickable
         baseStyle={{ width, height }}
         baseClassName={classNames(
@@ -214,6 +247,9 @@ export const ImageBase: React.FC<ImageBaseProps> & {
           loaded && styles.loaded,
           withTransparentBackground && styles.transparentBackground,
         )}
+        getRootRef={wrapperRef}
+        onMouseOver={onMouseOver}
+        onMouseOut={onMouseOut}
         {...restProps}
       >
         {hasSrc && (
@@ -263,3 +299,6 @@ ImageBase.Badge.displayName = 'ImageBase.Badge';
 
 ImageBase.Overlay = ImageBaseOverlay;
 ImageBase.Overlay.displayName = 'ImageBase.Overlay';
+
+ImageBase.FloatElement = ImageBaseFloatElement;
+ImageBase.FloatElement.displayName = 'ImageBase.FloatElement';
diff --git a/packages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.module.css b/packages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.module.css
new file mode 100644
index 0000000000..5189a3c2f0
--- /dev/null
+++ b/packages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.module.css
@@ -0,0 +1,134 @@
+.host {
+  position: absolute;
+  z-index: var(--vkui_internal--z_index_image_base_positioned_element);
+  transition: opacity 0.3s ease-in-out;
+
+  --vkui_internal--FloatElement_horizontal_indent: 0;
+  --vkui_internal--FloatElement_vertical_indent: 0;
+}
+
+.inlineIndent2xs {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_2xs);
+}
+
+.inlineIndentXs {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_xs);
+}
+
+.inlineIndentS {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_s);
+}
+
+.inlineIndentM {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_m);
+}
+
+.inlineIndentL {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_l);
+}
+
+.inlineIndentXl {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_xl);
+}
+
+.inlineIndent2xl {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_2xl);
+}
+
+.inlineIndent3xl {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_3xl);
+}
+
+.inlineIndent4xl {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_4xl);
+}
+
+.blockIndent2xs {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_2xs);
+}
+
+.blockIndentXs {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_xs);
+}
+
+.blockIndentS {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_s);
+}
+
+.blockIndentM {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_m);
+}
+
+.blockIndentL {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_l);
+}
+
+.blockIndentXl {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_xl);
+}
+
+.blockIndent2xl {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_2xl);
+}
+
+.blockIndent3xl {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_3xl);
+}
+
+.blockIndent4xl {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_4xl);
+}
+
+.hidden {
+  opacity: 0;
+}
+
+.placementTopStart {
+  inset-inline-start: var(--vkui_internal--FloatElement_horizontal_indent);
+  inset-block-start: var(--vkui_internal--FloatElement_vertical_indent);
+}
+
+.placementTop {
+  inset-inline-start: 50%;
+  inset-block-start: var(--vkui_internal--FloatElement_vertical_indent);
+  transform: translateX(-50%);
+}
+
+.placementTopEnd {
+  inset-inline-end: var(--vkui_internal--FloatElement_horizontal_indent);
+  inset-block-start: var(--vkui_internal--FloatElement_vertical_indent);
+}
+
+.placementBottomStart {
+  inset-inline-start: var(--vkui_internal--FloatElement_horizontal_indent);
+  inset-block-end: var(--vkui_internal--FloatElement_vertical_indent);
+}
+
+.placementBottom {
+  inset-inline-start: 50%;
+  inset-block-end: var(--vkui_internal--FloatElement_vertical_indent);
+  transform: translateX(-50%);
+}
+
+.placementBottomEnd {
+  inset-block-end: var(--vkui_internal--FloatElement_vertical_indent);
+  inset-inline-end: var(--vkui_internal--FloatElement_horizontal_indent);
+}
+
+.placementMiddleStart {
+  inset-inline-start: var(--vkui_internal--FloatElement_horizontal_indent);
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+}
+
+.placementMiddle {
+  inset-inline-start: 50%;
+  inset-block-start: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.placementMiddleEnd {
+  inset-inline-end: var(--vkui_internal--FloatElement_horizontal_indent);
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+}
diff --git a/packages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.stories.tsx b/packages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.stories.tsx
new file mode 100644
index 0000000000..b8f552339e
--- /dev/null
+++ b/packages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.stories.tsx
@@ -0,0 +1,68 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { Icon16MoreHorizontal, Icon28AddOutline, Icon28DeleteOutline } from '@vkontakte/icons';
+import { CanvasFullLayout, DisableCartesianParam } from '../../../storybook/constants';
+import { getAvatarUrl } from '../../../testing/mock';
+import { Button } from '../../Button/Button';
+import { CellButton } from '../../CellButton/CellButton';
+import { Popover } from '../../Popover/Popover';
+import { ImageBase } from '../ImageBase';
+import { ImageBaseFloatElement, type ImageBaseFloatElementProps } from './ImageBaseFloatElement';
+
+const ContextMenu = () => {
+  return (
+    <Popover
+      noStyling
+      trigger="click"
+      role="dialog"
+      content={({ onClose }) => (
+        <div
+          style={{
+            backgroundColor: 'var(--vkui--color_background_modal_inverse)',
+            borderRadius: 8,
+            boxShadow: '0 0 10px rgba(0, 0, 0, 0.3)',
+          }}
+        >
+          <CellButton role="menuitem" before={<Icon28AddOutline />} onClick={onClose}>
+            Добавить
+          </CellButton>
+          <CellButton
+            role="menuitem"
+            before={<Icon28DeleteOutline />}
+            appearance="negative"
+            onClick={onClose}
+          >
+            Удалить
+          </CellButton>
+        </div>
+      )}
+    >
+      <Button mode="primary" after={<Icon16MoreHorizontal />}></Button>
+    </Popover>
+  );
+};
+
+const story: Meta<ImageBaseFloatElementProps> = {
+  title: 'Blocks/ImageBaseFloatElement',
+  component: ImageBaseFloatElement,
+  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+  decorators: [
+    (Component) => (
+      <ImageBase size={96} src={getAvatarUrl('app_shorm_online')} alt="Приложение шторм онлайн">
+        <Component />
+      </ImageBase>
+    ),
+  ],
+};
+
+export default story;
+
+type Story = StoryObj<ImageBaseFloatElementProps>;
+
+export const Playground: Story = {
+  args: {
+    placement: 'top-start',
+    blockIndent: '5%',
+    inlineIndent: '5%',
+    children: <ContextMenu />,
+  },
+};
diff --git a/packages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.test.tsx b/packages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.test.tsx
new file mode 100644
index 0000000000..12688df355
--- /dev/null
+++ b/packages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.test.tsx
@@ -0,0 +1,163 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { baselineComponent } from '../../../testing/utils';
+import { Image } from '../../Image/Image';
+import {
+  type FloatElementIndentation,
+  type FloatElementPlacement,
+  ImageBaseFloatElement,
+} from './ImageBaseFloatElement';
+import styles from './ImageBaseFloatElement.module.css';
+
+describe(ImageBaseFloatElement, () => {
+  baselineComponent(ImageBaseFloatElement);
+
+  it('check visibility on image hover', async () => {
+    render(
+      <>
+        <Image size={96} src="test" alt="Приложение шторм онлайн" data-testid="image">
+          <ImageBaseFloatElement
+            data-testid="component"
+            visibility="on-hover"
+            placement="top-start"
+          />
+        </Image>
+      </>,
+    );
+
+    expect(screen.getByTestId('component')).toHaveClass(styles.hidden);
+
+    fireEvent(
+      screen.getByTestId('image'),
+      new MouseEvent('mouseover', {
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+
+    expect(screen.getByTestId('component')).not.toHaveClass(styles.hidden);
+
+    fireEvent(
+      screen.getByTestId('image'),
+      new MouseEvent('mouseout', {
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+
+    expect(screen.getByTestId('component')).toHaveClass(styles.hidden);
+  });
+
+  const placementFixtures = Object.entries({
+    'top-start': styles.placementTopStart,
+    'top': styles.placementTop,
+    'top-end': styles.placementTopEnd,
+    'bottom-start': styles.placementBottomStart,
+    'bottom': styles.placementBottom,
+    'bottom-end': styles.placementBottomEnd,
+    'middle-start': styles.placementMiddleStart,
+    'middle': styles.placementMiddle,
+    'middle-end': styles.placementMiddleEnd,
+  }).map(([placement, className]) => ({
+    placement: placement as FloatElementPlacement,
+    className,
+  }));
+
+  it.each(placementFixtures)('should have placement className %j', ({ placement, className }) => {
+    render(<ImageBaseFloatElement data-testid="component" placement={placement} />);
+    expect(screen.getByTestId('component')).toHaveClass(className);
+  });
+
+  const horizontalIndentationFixtures = Object.entries({
+    '2xs': styles.inlineIndent2xs,
+    'xs': styles.inlineIndentXs,
+    's': styles.inlineIndentS,
+    'm': styles.inlineIndentM,
+    'l': styles.inlineIndentL,
+    'xl': styles.inlineIndentXl,
+    '2xl': styles.inlineIndent2xl,
+    '3xl': styles.inlineIndent3xl,
+    '4xl': styles.inlineIndent4xl,
+  }).map(([indent, className]) => ({
+    indent: indent as Exclude<FloatElementIndentation, string | number>,
+    className,
+  }));
+
+  it.each(horizontalIndentationFixtures)(
+    'should have horizontal indentation className %j',
+    ({ indent, className }) => {
+      render(
+        <ImageBaseFloatElement data-testid="component" placement="top" inlineIndent={indent} />,
+      );
+      expect(screen.getByTestId('component')).toHaveClass(className);
+    },
+  );
+
+  const verticalIndentationFixtures = Object.entries({
+    '2xs': styles.blockIndent2xs,
+    'xs': styles.blockIndentXs,
+    's': styles.blockIndentS,
+    'm': styles.blockIndentM,
+    'l': styles.blockIndentL,
+    'xl': styles.blockIndentXl,
+    '2xl': styles.blockIndent2xl,
+    '3xl': styles.blockIndent3xl,
+    '4xl': styles.blockIndent4xl,
+  }).map(([indent, className]) => ({
+    indent: indent as Exclude<FloatElementIndentation, string | number>,
+    className,
+  }));
+
+  it.each(verticalIndentationFixtures)(
+    'should have vertical indentation className %j',
+    ({ indent, className }) => {
+      render(
+        <ImageBaseFloatElement data-testid="component" placement="top" blockIndent={indent} />,
+      );
+      expect(screen.getByTestId('component')).toHaveClass(className);
+    },
+  );
+
+  it('check number indentation', () => {
+    render(
+      <ImageBaseFloatElement
+        data-testid="component"
+        placement="top"
+        blockIndent={10}
+        inlineIndent={15}
+      />,
+    );
+    expect(
+      screen
+        .getByTestId('component')
+        .style.getPropertyValue('--vkui_internal--FloatElement_horizontal_indent'),
+    ).toBe('15px');
+
+    expect(
+      screen
+        .getByTestId('component')
+        .style.getPropertyValue('--vkui_internal--FloatElement_vertical_indent'),
+    ).toBe('10px');
+  });
+
+  it('check string indentation', () => {
+    render(
+      <ImageBaseFloatElement
+        data-testid="component"
+        placement="top"
+        blockIndent="5%"
+        inlineIndent="10%"
+      />,
+    );
+    expect(
+      screen
+        .getByTestId('component')
+        .style.getPropertyValue('--vkui_internal--FloatElement_horizontal_indent'),
+    ).toBe('10%');
+
+    expect(
+      screen
+        .getByTestId('component')
+        .style.getPropertyValue('--vkui_internal--FloatElement_vertical_indent'),
+    ).toBe('5%');
+  });
+});
diff --git a/packages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.tsx b/packages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.tsx
new file mode 100644
index 0000000000..a2f4123046
--- /dev/null
+++ b/packages/vkui/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.tsx
@@ -0,0 +1,168 @@
+'use client';
+
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect';
+import { type HTMLAttributesWithRootRef } from '../../../types';
+import { RootComponent } from '../../RootComponent/RootComponent';
+import { ImageBaseContext } from '../context';
+import { mutableRemoveElement, resolveIndent } from './helpers';
+import styles from './ImageBaseFloatElement.module.css';
+
+export type FloatElementPlacement =
+  | 'top-start'
+  | 'top'
+  | 'top-end'
+  | 'bottom-start'
+  | 'bottom'
+  | 'bottom-end'
+  | 'middle-start'
+  | 'middle'
+  | 'middle-end';
+
+export type FloatElementIndentation =
+  | '2xs'
+  | 'xs'
+  | 's'
+  | 'm'
+  | 'l'
+  | 'xl'
+  | '2xl'
+  | '3xl'
+  | '4xl'
+  | number
+  | string;
+
+const positionPlacementClassNames = {
+  'top-start': styles.placementTopStart,
+  'top': styles.placementTop,
+  'top-end': styles.placementTopEnd,
+  'bottom-start': styles.placementBottomStart,
+  'bottom': styles.placementBottom,
+  'bottom-end': styles.placementBottomEnd,
+  'middle-start': styles.placementMiddleStart,
+  'middle': styles.placementMiddle,
+  'middle-end': styles.placementMiddleEnd,
+};
+
+const inlineIndentClassNames = {
+  '2xs': styles.inlineIndent2xs,
+  'xs': styles.inlineIndentXs,
+  's': styles.inlineIndentS,
+  'm': styles.inlineIndentM,
+  'l': styles.inlineIndentL,
+  'xl': styles.inlineIndentXl,
+  '2xl': styles.inlineIndent2xl,
+  '3xl': styles.inlineIndent3xl,
+  '4xl': styles.inlineIndent4xl,
+};
+
+const blockIndentClassNames = {
+  '2xs': styles.blockIndent2xs,
+  'xs': styles.blockIndentXs,
+  's': styles.blockIndentS,
+  'm': styles.blockIndentM,
+  'l': styles.blockIndentL,
+  'xl': styles.blockIndentXl,
+  '2xl': styles.blockIndent2xl,
+  '3xl': styles.blockIndent3xl,
+  '4xl': styles.blockIndent4xl,
+};
+
+export interface ImageBaseFloatElementProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
+  /**
+   * Позиция компонента относительно родителя
+   */
+  placement: FloatElementPlacement;
+  /**
+   * Отступ компонента от края контейнера по горизонтали
+   */
+  inlineIndent?: FloatElementIndentation;
+  /**
+   * Отступ компонента от края контейнера по вертикали
+   */
+  blockIndent?: FloatElementIndentation;
+  /**
+   * Режим отображения компонента:
+   *
+   * - `"always"`: Всегда
+   * - `"on-hover"`: При наведении на картинку
+   */
+  visibility?: 'always' | 'on-hover';
+}
+
+export const ImageBaseFloatElement = ({
+  placement,
+  visibility = 'always',
+  style,
+  className,
+  inlineIndent,
+  blockIndent,
+  ...restProps
+}: ImageBaseFloatElementProps) => {
+  const [hidden, setHidden] = React.useState(visibility !== 'always');
+  const { onMouseOverHandlers, onMouseOutHandlers } = React.useContext(ImageBaseContext);
+
+  useIsomorphicLayoutEffect(
+    function resetHidden() {
+      setHidden(visibility === 'on-hover');
+    },
+    [visibility],
+  );
+
+  useIsomorphicLayoutEffect(
+    function addMouseHandlers() {
+      if (visibility === 'on-hover') {
+        const onMouseOver = () => setHidden(false);
+        const onMouseOut = () => setHidden(true);
+
+        onMouseOverHandlers.push(onMouseOver);
+        onMouseOutHandlers.push(onMouseOut);
+
+        return () => {
+          mutableRemoveElement(onMouseOverHandlers, onMouseOver);
+          mutableRemoveElement(onMouseOutHandlers, onMouseOut);
+        };
+      }
+      return;
+    },
+    [visibility],
+  );
+
+  const [inlineIndentStyle, blockIndentStyle, inlineIndentClassName, blockIndentClassName] =
+    React.useMemo(() => {
+      const [inlineIndentStyle, inlineIndentClassName] = resolveIndent(
+        inlineIndent,
+        '--vkui_internal--FloatElement_horizontal_indent',
+        inlineIndentClassNames,
+      );
+      const [blockIndentStyle, blockIndentClassName] = resolveIndent(
+        blockIndent,
+        '--vkui_internal--FloatElement_vertical_indent',
+        blockIndentClassNames,
+      );
+
+      return [inlineIndentStyle, blockIndentStyle, inlineIndentClassName, blockIndentClassName];
+    }, [inlineIndent, blockIndent]);
+
+  return (
+    <RootComponent
+      {...restProps}
+      style={{
+        ...style,
+        ...inlineIndentStyle,
+        ...blockIndentStyle,
+      }}
+      className={classNames(
+        styles.host,
+        hidden && styles.hidden,
+        positionPlacementClassNames[placement],
+        inlineIndentClassName,
+        blockIndentClassName,
+        className,
+      )}
+    />
+  );
+};
+
+ImageBaseFloatElement.displayName = 'ImageBaseFloatElement';
diff --git a/packages/vkui/src/components/ImageBase/ImageBaseFloatElement/helpers.ts b/packages/vkui/src/components/ImageBase/ImageBaseFloatElement/helpers.ts
new file mode 100644
index 0000000000..17bfd4c617
--- /dev/null
+++ b/packages/vkui/src/components/ImageBase/ImageBaseFloatElement/helpers.ts
@@ -0,0 +1,44 @@
+import { type FloatElementIndentation } from './ImageBaseFloatElement';
+
+function isIndentSizeConstant(indent: FloatElementIndentation) {
+  return (
+    indent === '2xs' ||
+    indent === 'xs' ||
+    indent === 's' ||
+    indent === 'm' ||
+    indent === 'l' ||
+    indent === 'xl' ||
+    indent === '2xl' ||
+    indent === '3xl' ||
+    indent === '4xl'
+  );
+}
+
+function calculateIndent(indent: FloatElementIndentation) {
+  if (isIndentSizeConstant(indent)) {
+    return;
+  }
+  return typeof indent === 'string' ? indent : `${indent}px`;
+}
+
+export const resolveIndent = (
+  indent: FloatElementIndentation | undefined,
+  cssProperty: string,
+  classNames: Record<string, string>,
+): [React.CSSProperties | undefined, string | undefined] => {
+  if (!indent) {
+    return [undefined, undefined];
+  }
+
+  const calculatedIndent = calculateIndent(indent);
+
+  if (calculatedIndent) {
+    return [{ [cssProperty]: calculatedIndent }, undefined];
+  }
+
+  return [undefined, classNames[indent]];
+};
+
+export const mutableRemoveElement = <T>(arr: T[], element: T) => {
+  arr.splice(arr.indexOf(element), 1);
+};
diff --git a/packages/vkui/src/components/ImageBase/context.ts b/packages/vkui/src/components/ImageBase/context.ts
index b8be8e5956..618107501d 100644
--- a/packages/vkui/src/components/ImageBase/context.ts
+++ b/packages/vkui/src/components/ImageBase/context.ts
@@ -4,4 +4,6 @@ import type { ImageBaseContextProps } from './types';
 export const ImageBaseContext: React.Context<ImageBaseContextProps> =
   React.createContext<ImageBaseContextProps>({
     size: 0,
+    onMouseOverHandlers: [],
+    onMouseOutHandlers: [],
   });
diff --git a/packages/vkui/src/components/ImageBase/types.ts b/packages/vkui/src/components/ImageBase/types.ts
index 32d77d0a50..7795af7f5f 100644
--- a/packages/vkui/src/components/ImageBase/types.ts
+++ b/packages/vkui/src/components/ImageBase/types.ts
@@ -10,4 +10,6 @@ export type ImageBaseExpectedIconProps = {
 
 export interface ImageBaseContextProps {
   size: ImageBaseSize | number;
+  onMouseOverHandlers: VoidFunction[];
+  onMouseOutHandlers: VoidFunction[];
 }
diff --git a/packages/vkui/src/index.ts b/packages/vkui/src/index.ts
index 59296dcb8c..ff9d53d8b1 100644
--- a/packages/vkui/src/index.ts
+++ b/packages/vkui/src/index.ts
@@ -60,6 +60,9 @@ export type {
   ImageBaseExpectedIconProps,
   ImageBaseBadgeProps,
   ImageBaseOverlayProps,
+  ImageBaseFloatElementProps,
+  FloatElementPlacement,
+  FloatElementIndentation,
 } from './components/ImageBase/ImageBase';
 
 /**
diff --git a/packages/vkui/src/styles/constants.css b/packages/vkui/src/styles/constants.css
index d017c58473..6463dffbf8 100644
--- a/packages/vkui/src/styles/constants.css
+++ b/packages/vkui/src/styles/constants.css
@@ -77,6 +77,7 @@
   --vkui_internal--z_index_image_base_overlay: 0;
   --vkui_internal--z_index_image_base_border: 1;
   --vkui_internal--z_index_image_base_badge: 2;
+  --vkui_internal--z_index_image_base_positioned_element: 3;
 
   /* z_index HorizontalScroll isolate */
   --vkui_internal--z_index_horizontal_scroll_arrow: 1;