diff --git a/web/src/ui/timeline/content/MediaMessageBody.tsx b/web/src/ui/timeline/content/MediaMessageBody.tsx
index 01fc95f..9a8401a 100644
--- a/web/src/ui/timeline/content/MediaMessageBody.tsx
+++ b/web/src/ui/timeline/content/MediaMessageBody.tsx
@@ -59,7 +59,10 @@ const MediaMessageBody = ({ event, room, sender }: EventContentProps) => {
 		}
 	}
 	const renderMediaElem = !supportsClickToShow || showPreviewsByDefault || clickedShow
-	const renderPlaceholderElem = supportsClickToShow && (!renderMediaElem || !!contentWarning || !loaded)
+	const renderPlaceholderElem = supportsClickToShow
+		&& (!renderMediaElem
+			|| (contentWarning && !clickedShow)
+			|| !loaded)
 	const isLoadingOnlyCover = !loaded && !contentWarning && renderMediaElem
 
 	const [mediaContent, containerClass, containerStyle] = useMediaContent(content, event.type, undefined, onLoad)
diff --git a/web/src/ui/timeline/content/index.css b/web/src/ui/timeline/content/index.css
index 0a403a2..bac8ff7 100644
--- a/web/src/ui/timeline/content/index.css
+++ b/web/src/ui/timeline/content/index.css
@@ -215,6 +215,10 @@ div.media-container {
 			border-radius: .25rem;
 		}
 
+		&:has(> div.empty-placeholder) + img {
+			filter: blur(16px);
+		}
+
 		& + img {
 			/* In order loading=lazy to work, the image has to be visible,
 			   so put it behind the placeholder instead of below */