diff --git a/frontend/src/components/gallery/PhotoCard.tsx b/frontend/src/components/gallery/PhotoCard.tsx
index 4eb17eda..24c16d5f 100644
--- a/frontend/src/components/gallery/PhotoCard.tsx
+++ b/frontend/src/components/gallery/PhotoCard.tsx
@@ -9,6 +9,31 @@ import { ColorLabelBadge } from './ColorLabelBadge';
 import { useGuestIdentityOptional } from '../../contexts/GuestIdentityContext';
 import type { Photo } from '../../types';
 
+const COARSE_POINTER_QUERY = '(hover: none) and (pointer: coarse)';
+
+/**
+ * Does this device lack hover? Read synchronously at first render rather than
+ * in an effect: every layout runs this now (#1263), and a mount-time state
+ * change here would land an extra render between the tile measurement in
+ * useLayoutEffect and the image mount it gates, remounting each card once.
+ *
+ * matchMedia is authoritative wherever it exists, because it describes the
+ * PRIMARY pointer. `ontouchstart` and `maxTouchPoints` only say a touchscreen
+ * is present somewhere, which is equally true of a touchscreen laptop being
+ * driven by its mouse -- OR-ing them in would classify that as touch-only and
+ * turn every ordinary click into a two-step reveal. They stand in only where
+ * matchMedia is absent (old embedded webviews, some test environments).
+ */
+function detectCoarsePointer(): boolean {
+  if (typeof window === 'undefined') return false;
+  if (typeof window.matchMedia === 'function') {
+    return window.matchMedia(COARSE_POINTER_QUERY).matches;
+  }
+  const hasNavigator = typeof navigator !== 'undefined';
+  return ('ontouchstart' in window)
+    || (hasNavigator && navigator.maxTouchPoints > 0);
+}
+
 export interface PhotoCardFeedbackOptions {
   allowLikes?: boolean;
   allowFavorites?: boolean;
@@ -37,9 +62,11 @@ export interface PhotoCardProps {
   skeletonClassName?: string;
   /** Keep container at opacity 0 until in view (only meaningful with `lazy`). */
   fadeInWhenVisible?: boolean;
-  /** Tap-to-reveal overlay state machine for touch devices (Grid/Justified). */
-  touchAware?: boolean;
-  /** Static overlay classes; `touchAware` appends computed visibility classes. */
+  /**
+   * Static overlay classes — positioning, backdrop, spacing. Visibility and
+   * hit-testing are owned by this component for every layout (#1263), so a
+   * layout must NOT pass its own `opacity-*` / `group-hover:*` here.
+   */
   overlayBaseClassName: string;
   /** 'light' = white/90 buttons with dark icons; 'dark' = white/20 buttons with white icons. */
   actionVariant?: 'light' | 'dark';
@@ -84,7 +111,6 @@ export const PhotoCard: React.FC<PhotoCardProps> = ({
   inViewRootMargin,
   skeletonClassName = 'skeleton w-full h-full rounded-lg',
   fadeInWhenVisible = false,
-  touchAware = false,
   overlayBaseClassName,
   actionVariant = 'light',
   allowDownloads = true,
@@ -107,7 +133,7 @@ export const PhotoCard: React.FC<PhotoCardProps> = ({
 }) => {
   const guestIdentity = useGuestIdentityOptional();
   const [overlayVisible, setOverlayVisible] = useState(false);
-  const [isTouchDevice, setIsTouchDevice] = useState(false);
+  const [isTouchDevice, setIsTouchDevice] = useState(detectCoarsePointer);
   const overlayTimeoutRef = useRef<number | null>(null);
 
   // Self-managed identity modal state (identityMode === 'self')
@@ -117,22 +143,12 @@ export const PhotoCard: React.FC<PhotoCardProps> = ({
 
   const savedIdentityValue = identityMode === 'self' ? selfIdentity : savedIdentity;
 
-  // Detect touch device (touch-aware overlay only)
+  // Keep the initial reading in step when the pointer changes under us —
+  // a tablet docked to a mouse, a browser window moved to another screen.
   useEffect(() => {
-    if (!touchAware || typeof window === 'undefined') return;
-
-    const mediaQuery = window.matchMedia('(hover: none) and (pointer: coarse)');
-    const updateTouchState = () => {
-      const hasNavigator = typeof navigator !== 'undefined';
-      setIsTouchDevice(
-        mediaQuery.matches ||
-        ('ontouchstart' in window) ||
-        (hasNavigator && navigator.maxTouchPoints > 0)
-      );
-    };
-
-    updateTouchState();
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return;
 
+    const mediaQuery = window.matchMedia(COARSE_POINTER_QUERY);
     const listener = (event: MediaQueryListEvent) => {
       setIsTouchDevice(event.matches);
     };
@@ -150,7 +166,7 @@ export const PhotoCard: React.FC<PhotoCardProps> = ({
         mediaQuery.removeListener(listener);
       }
     };
-  }, [touchAware]);
+  }, []);
 
   const hideOverlay = useCallback(() => {
     if (overlayTimeoutRef.current !== null && typeof window !== 'undefined') {
@@ -225,23 +241,33 @@ export const PhotoCard: React.FC<PhotoCardProps> = ({
 
   const showFeedbackActions = feedbackEnabled && Boolean(feedbackOptions);
 
-  const overlayVisibilityClass = overlayVisible
-    ? 'opacity-100 md:opacity-100'
-    : 'opacity-0 md:opacity-0';
+  // #1263 - opacity hides pixels, not hit-testing. An `opacity-0` control is
+  // still tappable, and on a touchscreen (no hover) it is invisible for good,
+  // so a tap in the middle of a tile silently downloaded or liked instead of
+  // opening the photo. Every visibility toggle below therefore moves
+  // pointer-events with it, in both the tap-to-reveal and the hover branch.
+  //
+  // The hover variants are emitted for pointer devices only, rather than being
+  // gated behind `md:`. Width is the wrong proxy for hover: a mouse user with
+  // a window under 768px got no overlay at all, and in Masonry, Mosaic and
+  // Timeline -- whose `group-hover:` used to be unprefixed -- that made
+  // download and like unreachable at any narrow width. Withholding the classes
+  // on touch is what the breakpoint was really for, since :hover latches on a
+  // touchscreen once a tile has been tapped.
+  const revealed = (visible: boolean) => {
+    const base = visible
+      ? 'opacity-100 pointer-events-auto'
+      : 'opacity-0 pointer-events-none';
+    return isTouchDevice
+      ? base
+      : `${base} group-hover:opacity-100 group-hover:pointer-events-auto`;
+  };
 
-  const overlayClassName = touchAware
-    ? `${overlayBaseClassName} ${overlayVisibilityClass} md:group-hover:opacity-100`
-    : overlayBaseClassName;
+  const overlayClassName = `${overlayBaseClassName} ${revealed(overlayVisible)}`;
 
-  const checkboxVisibilityClass = touchAware
-    ? `${
-        isSelected || isSelectionMode || overlayVisible
-          ? 'opacity-100 md:opacity-100'
-          : 'opacity-0 md:opacity-0'
-      } md:group-hover:opacity-100`
-    : isSelected
-      ? 'opacity-100'
-      : 'opacity-0 group-hover:opacity-100';
+  const checkboxVisibilityClass = revealed(
+    isSelected || isSelectionMode || overlayVisible,
+  );
 
   const buttonType = actionVariant === 'dark' ? ('button' as const) : undefined;
   const actionButtonClass =
@@ -251,11 +277,6 @@ export const PhotoCard: React.FC<PhotoCardProps> = ({
   const actionIconClass = actionVariant === 'dark' ? 'w-5 h-5 text-white' : 'w-5 h-5 text-neutral-800';
 
   const handlePhotoClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (!touchAware) {
-      onClick(e);
-      return;
-    }
-
     if (isTouchDevice && !overlayVisible && !isSelectionMode) {
       e.preventDefault();
       e.stopPropagation();
diff --git a/frontend/src/components/gallery/PhotoGrid.tsx b/frontend/src/components/gallery/PhotoGrid.tsx
index 436342e4..2379cb94 100644
--- a/frontend/src/components/gallery/PhotoGrid.tsx
+++ b/frontend/src/components/gallery/PhotoGrid.tsx
@@ -311,8 +311,11 @@ const PhotoThumbnail: React.FC<PhotoThumbnailProps> = ({
             </div>
           )}
           
-          {/* Overlay on hover/tap - Always visible on mobile for better UX */}
-          <div className="absolute inset-0 bg-black/40 opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity duration-200 rounded-lg flex items-center justify-center gap-2">
+          {/* Overlay on hover/tap - Always visible on mobile for better UX.
+              #1263: `md:opacity-0` hides the pixels but not the hit area, so
+              on a narrow pointer-device window the buttons stayed tappable
+              while invisible. pointer-events tracks opacity. */}
+          <div className="absolute inset-0 bg-black/40 opacity-100 pointer-events-auto md:opacity-0 md:pointer-events-none md:group-hover:opacity-100 md:group-hover:pointer-events-auto transition-opacity duration-200 rounded-lg flex items-center justify-center gap-2">
             {!isSelectionMode && (
               <>
                 <button
@@ -328,7 +331,12 @@ const PhotoThumbnail: React.FC<PhotoThumbnailProps> = ({
                 {allowDownloads && (
                   <button
                     className="p-2 sm:p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
-                    onClick={onDownload}
+                    // #1263 — without stopPropagation the tap also reached the
+                    // tile's own onClick, so downloading opened the lightbox too.
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onDownload(e);
+                    }}
                     aria-label="Download photo"
                   >
                     <Download className="w-5 h-5 text-theme" />
diff --git a/frontend/src/components/gallery/__tests__/PhotoCard.touchTargets.test.tsx b/frontend/src/components/gallery/__tests__/PhotoCard.touchTargets.test.tsx
new file mode 100644
index 00000000..b8f39517
--- /dev/null
+++ b/frontend/src/components/gallery/__tests__/PhotoCard.touchTargets.test.tsx
@@ -0,0 +1,213 @@
+/**
+ * Mobile tap determinism (#1263).
+ *
+ * The overlay actions (open / download / like) are hidden with `opacity-0`,
+ * which hides pixels but not hit-testing. On a pointer device hover reveals
+ * them before anyone can click, so the gap never shows; on a touchscreen there
+ * is no hover, so the buttons stayed permanently invisible AND permanently
+ * tappable. A tap near the middle of a tile hit an unseen button, whose
+ * stopPropagation then suppressed the tile's own open — so the same gesture
+ * downloaded, liked or opened depending on where the finger landed.
+ *
+ * Visibility and hit-testing have to move together. These tests pin the
+ * pointer-events half, which is the half that was missing.
+ */
+import React from 'react';
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+
+import { PhotoCard } from '../PhotoCard';
+import type { Photo } from '../../../types';
+
+vi.mock('../../common', () => ({
+  AuthenticatedImage: ({ src, alt }: { src: string; alt?: string }) => (
+    <img data-testid="tile" src={src} alt={alt} />
+  ),
+}));
+
+vi.mock('../../../contexts/GuestIdentityContext', () => ({
+  useGuestIdentityOptional: () => null,
+}));
+
+const PHOTO = {
+  id: 7,
+  filename: 'IMG_0001.jpg',
+  url: '/api/gallery/x/photo/7',
+  thumbnail_url: '/api/gallery/x/thumbnail/7',
+  type: 'individual',
+  size: 1,
+  uploaded_at: '2026-01-01T00:00:00Z',
+  width: 4000,
+  height: 3000,
+} as Photo;
+
+/** Report a coarse, hover-less pointer — a phone. */
+function stubTouchDevice(isTouch: boolean) {
+  Object.defineProperty(window, 'matchMedia', {
+    configurable: true,
+    writable: true,
+    value: (query: string) => ({
+      matches: isTouch && query.includes('pointer: coarse'),
+      media: query,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      addListener: () => {},
+      removeListener: () => {},
+      onchange: null,
+      dispatchEvent: () => false,
+    }),
+  });
+  Object.defineProperty(navigator, 'maxTouchPoints', {
+    configurable: true,
+    value: isTouch ? 5 : 0,
+  });
+  // jsdom defines `ontouchstart`, which PhotoCard reads as a third touch
+  // signal — remove it so the pointer-device case is actually exercised.
+  if (isTouch) (window as any).ontouchstart = null;
+  else delete (window as any).ontouchstart;
+}
+
+/** Class tokens, so `md:group-hover:pointer-events-auto` isn't mistaken for the bare one. */
+function tokens(el: HTMLElement) {
+  return Array.from(el.classList);
+}
+
+function renderCard(props: Partial<React.ComponentProps<typeof PhotoCard>> = {}) {
+  return render(
+    <PhotoCard
+      photo={PHOTO}
+      isSelected={false}
+      isSelectionMode={false}
+      onClick={() => {}}
+      onDownload={() => {}}
+      onToggleSelect={() => {}}
+      className="group tile"
+      overlayBaseClassName="absolute inset-0 flex items-center justify-center gap-2"
+      imageProps={{ src: PHOTO.thumbnail_url!, alt: PHOTO.filename }}
+      allowDownloads
+      {...props}
+    />,
+  );
+}
+
+/** The overlay is the element the action buttons live in. */
+function overlayOf(container: HTMLElement) {
+  const button = container.querySelector('[aria-label="View full size"]');
+  return button?.parentElement as HTMLElement;
+}
+
+beforeEach(() => {
+  Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+    configurable: true,
+    get() { return 320; },
+  });
+  stubTouchDevice(true);
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  delete (HTMLElement.prototype as any).offsetWidth;
+});
+
+describe('PhotoCard overlay hit-testing (#1263)', () => {
+  it('makes the hidden overlay inert, so a tap cannot reach an unseen button', () => {
+    const { container } = renderCard();
+    const overlay = overlayOf(container);
+
+    expect(tokens(overlay)).toContain('opacity-0');
+    expect(tokens(overlay)).toContain('pointer-events-none');
+    expect(tokens(overlay)).not.toContain('pointer-events-auto');
+  });
+
+  it('arms the overlay once a tap has revealed it', () => {
+    const onClick = vi.fn();
+    const { container } = renderCard({ onClick });
+
+    // First tap on the tile body reveals the actions; it must not open.
+    fireEvent.click(container.querySelector('.tile')!);
+    expect(onClick).not.toHaveBeenCalled();
+
+    const overlay = overlayOf(container);
+    expect(tokens(overlay)).toContain('opacity-100');
+    expect(tokens(overlay)).toContain('pointer-events-auto');
+    expect(tokens(overlay)).not.toContain('pointer-events-none');
+
+    // Second tap on the tile body now opens the photo.
+    fireEvent.click(container.querySelector('.tile')!);
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('keeps the selection checkbox inert while it is invisible', () => {
+    const onToggleSelect = vi.fn();
+    const { container } = renderCard({ onToggleSelect });
+    const checkbox = screen.getByRole('checkbox');
+
+    expect(tokens(checkbox)).toContain('opacity-0');
+    expect(tokens(checkbox)).toContain('pointer-events-none');
+
+    fireEvent.click(container.querySelector('.tile')!);
+    expect(tokens(screen.getByRole('checkbox'))).toContain('pointer-events-auto');
+  });
+
+  it('reveals on touch without a layout having to opt in', () => {
+    // Masonry / Mosaic / Timeline previously passed their own
+    // `opacity-0 group-hover:opacity-100` and never opted into the touch
+    // state machine, so on a phone their overlay was unreachable-but-tappable
+    // forever. PhotoCard owns visibility for every layout now.
+    const onClick = vi.fn();
+    const { container } = renderCard({ onClick });
+    fireEvent.click(container.querySelector('.tile')!);
+    expect(onClick).not.toHaveBeenCalled();
+    expect(tokens(overlayOf(container))).toContain('pointer-events-auto');
+  });
+
+  it('leaves a pointer device on hover semantics — no tap-to-reveal step', () => {
+    stubTouchDevice(false);
+    const onClick = vi.fn();
+    const { container } = renderCard({ onClick });
+
+    fireEvent.click(container.querySelector('.tile')!);
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(tokens(overlayOf(container))).toContain('group-hover:pointer-events-auto');
+  });
+
+  it('reaches the hover overlay below the md breakpoint', () => {
+    // Codex review round 1. The hover variants used to be `md:group-hover:*`,
+    // so a mouse user with a window under 768px saw no overlay at all — and in
+    // Masonry, Mosaic and Timeline, whose `group-hover:` was unprefixed before
+    // this branch, that made download and like unreachable. Viewport width is
+    // not what decides whether a device can hover.
+    stubTouchDevice(false);
+    const { container } = renderCard();
+    const overlay = tokens(overlayOf(container));
+
+    expect(overlay).toContain('group-hover:opacity-100');
+    expect(overlay).toContain('group-hover:pointer-events-auto');
+    expect(overlay.some((c) => c.startsWith('md:'))).toBe(false);
+  });
+
+  it('withholds the hover variants on touch, where :hover latches after a tap', () => {
+    // The reason the breakpoint was there in the first place. Emitting
+    // `group-hover:` on a touchscreen leaves the overlay stuck open on the
+    // last tile tapped.
+    const { container } = renderCard();
+    expect(tokens(overlayOf(container)).some((c) => c.startsWith('group-hover:'))).toBe(false);
+  });
+
+  it('treats a touchscreen laptop driven by a mouse as a pointer device', () => {
+    // Codex review round 1. matchMedia describes the PRIMARY pointer;
+    // maxTouchPoints only says a touchscreen exists. OR-ing them classified a
+    // hybrid device as touch-only, so an ordinary click merely revealed the
+    // overlay and opening a photo took two clicks — a regression for the three
+    // layouts that had no tap-to-reveal step before.
+    stubTouchDevice(false);
+    Object.defineProperty(navigator, 'maxTouchPoints', { configurable: true, value: 10 });
+    (window as any).ontouchstart = null;
+
+    const onClick = vi.fn();
+    const { container } = renderCard({ onClick });
+
+    fireEvent.click(container.querySelector('.tile')!);
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/frontend/src/components/gallery/layouts/GalleryPremiumLayout.css b/frontend/src/components/gallery/layouts/GalleryPremiumLayout.css
index 7c24d717..c6a2ef92 100644
--- a/frontend/src/components/gallery/layouts/GalleryPremiumLayout.css
+++ b/frontend/src/components/gallery/layouts/GalleryPremiumLayout.css
@@ -292,11 +292,16 @@
   transition: all 0.2s ease;
   cursor: pointer;
   opacity: 0;
+  /* #1263 - opacity 0 still hit-tests. On a touchscreen there is no hover to
+     reveal this, so the top-left corner of every tile silently toggled
+     selection. Hit-testing tracks visibility. */
+  pointer-events: none;
 }
 
 .gallery-premium-photo-card:hover .gallery-premium-checkbox,
 .gallery-premium-checkbox.visible {
   opacity: 1;
+  pointer-events: auto;
 }
 
 .gallery-premium-checkbox:hover {
@@ -323,11 +328,35 @@
   cursor: pointer;
   transition: all 0.2s ease;
   opacity: 0;
+  /* #1263 - same as the checkbox: invisible must also mean untappable, or the
+     top-right corner of every tile likes the photo instead of opening it. */
+  pointer-events: none;
 }
 
 .gallery-premium-photo-card:hover .gallery-premium-like-btn,
 .gallery-premium-like-btn.liked {
   opacity: 1;
+  pointer-events: auto;
+}
+
+/* Touch devices never get :hover, so the two controls above would be
+   permanently unreachable rather than merely accidental. Show them outright
+   and give them a finger-sized target (#1263). */
+@media (hover: none) and (pointer: coarse) {
+  .gallery-premium-checkbox,
+  .gallery-premium-like-btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .gallery-premium-checkbox {
+    height: 2.25rem;
+    width: 2.25rem;
+  }
+
+  .gallery-premium-like-btn {
+    padding: 0.75rem;
+  }
 }
 
 .gallery-premium-like-btn:hover {
diff --git a/frontend/src/components/gallery/layouts/GridGalleryLayout.tsx b/frontend/src/components/gallery/layouts/GridGalleryLayout.tsx
index 7b50cd56..544154ca 100644
--- a/frontend/src/components/gallery/layouts/GridGalleryLayout.tsx
+++ b/frontend/src/components/gallery/layouts/GridGalleryLayout.tsx
@@ -86,7 +86,6 @@ const GridPhoto: React.FC<GridPhotoProps> = ({
       lazy
       fadeInWhenVisible={animationType === 'fade'}
       skeletonClassName="skeleton aspect-square w-full rounded-lg"
-      touchAware
       imageProps={{
         src: photo.thumbnail_url || photo.url,
         alt: photo.filename,
diff --git a/frontend/src/components/gallery/layouts/JustifiedGalleryLayout.tsx b/frontend/src/components/gallery/layouts/JustifiedGalleryLayout.tsx
index 5268029a..a99193fe 100644
--- a/frontend/src/components/gallery/layouts/JustifiedGalleryLayout.tsx
+++ b/frontend/src/components/gallery/layouts/JustifiedGalleryLayout.tsx
@@ -127,7 +127,6 @@ const JustifiedPhoto: React.FC<JustifiedPhotoProps> = ({
       inViewRootMargin="100px"
       fadeInWhenVisible={animationType === 'fade'}
       skeletonClassName="skeleton w-full h-full rounded-lg"
-      touchAware
       imageProps={{
         src: photo.thumbnail_url || photo.url,
         alt: photo.filename,
diff --git a/frontend/src/components/gallery/layouts/MasonryGalleryLayout.tsx b/frontend/src/components/gallery/layouts/MasonryGalleryLayout.tsx
index 654fc61e..8c9ac998 100644
--- a/frontend/src/components/gallery/layouts/MasonryGalleryLayout.tsx
+++ b/frontend/src/components/gallery/layouts/MasonryGalleryLayout.tsx
@@ -122,7 +122,7 @@ const MasonryPhoto: React.FC<MasonryPhotoProps> = ({
         isGallery: true,
         protectFromDownload: !allowDownloads,
       }}
-      overlayBaseClassName="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 rounded-lg flex items-center justify-center gap-2"
+      overlayBaseClassName="absolute inset-0 bg-black/40 transition-opacity duration-200 rounded-lg flex items-center justify-center gap-2"
       allowDownloads={allowDownloads}
       feedbackEnabled={feedbackEnabled}
       feedbackOptions={feedbackOptions}
@@ -378,7 +378,7 @@ export const MasonryGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
                 isGallery: true,
                 protectFromDownload: !allowDownloads,
               }}
-              overlayBaseClassName="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 rounded-lg flex items-center justify-center gap-2"
+              overlayBaseClassName="absolute inset-0 bg-black/40 transition-opacity duration-200 rounded-lg flex items-center justify-center gap-2"
               actionVariant="dark"
               allowDownloads={allowDownloads}
               beforeOverlay={feedbackEnabled ? <FeedbackCountIndicators photo={photo} /> : undefined}
@@ -436,7 +436,7 @@ export const MasonryGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
                 isGallery: true,
                 protectFromDownload: !allowDownloads,
               }}
-              overlayBaseClassName="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 rounded-lg flex items-center justify-center gap-2"
+              overlayBaseClassName="absolute inset-0 bg-black/40 transition-opacity duration-200 rounded-lg flex items-center justify-center gap-2"
               actionVariant="dark"
               allowDownloads={allowDownloads}
               beforeOverlay={feedbackEnabled ? <FeedbackCountIndicators photo={photo} /> : undefined}
@@ -503,7 +503,7 @@ export const MasonryGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
                 isGallery: true,
                 protectFromDownload: !allowDownloads,
               }}
-              overlayBaseClassName="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center gap-2"
+              overlayBaseClassName="absolute inset-0 bg-black/40 transition-opacity duration-200 flex items-center justify-center gap-2"
               actionVariant="dark"
               allowDownloads={allowDownloads}
               beforeOverlay={feedbackEnabled ? <FeedbackCountIndicators photo={photo} /> : undefined}
diff --git a/frontend/src/components/gallery/layouts/MosaicGalleryLayout.tsx b/frontend/src/components/gallery/layouts/MosaicGalleryLayout.tsx
index ecef30f4..6a7b2915 100644
--- a/frontend/src/components/gallery/layouts/MosaicGalleryLayout.tsx
+++ b/frontend/src/components/gallery/layouts/MosaicGalleryLayout.tsx
@@ -85,7 +85,7 @@ const MosaicPhoto: React.FC<MosaicPhotoProps> = ({
           isGallery: true,
           protectFromDownload: !allowDownloads,
         }}
-        overlayBaseClassName="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center gap-2"
+        overlayBaseClassName="absolute inset-0 bg-black/40 transition-opacity duration-200 flex items-center justify-center gap-2"
         allowDownloads={allowDownloads}
         feedbackEnabled={feedbackEnabled}
         feedbackOptions={feedbackOptions}
diff --git a/frontend/src/components/gallery/layouts/TimelineGalleryLayout.tsx b/frontend/src/components/gallery/layouts/TimelineGalleryLayout.tsx
index 8e4807af..cac34ec8 100644
--- a/frontend/src/components/gallery/layouts/TimelineGalleryLayout.tsx
+++ b/frontend/src/components/gallery/layouts/TimelineGalleryLayout.tsx
@@ -132,7 +132,7 @@ export const TimelineGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
                       isGallery: true,
                       protectFromDownload: !allowDownloads,
                     }}
-                    overlayBaseClassName="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 rounded-lg flex items-center justify-center gap-2"
+                    overlayBaseClassName="absolute inset-0 bg-black/40 transition-opacity duration-200 rounded-lg flex items-center justify-center gap-2"
                     allowDownloads={allowDownloads}
                     feedbackEnabled={feedbackEnabled}
                     feedbackOptions={feedbackOptions}