Add overlay hover styles

Author: domlander

dotcom-rendering/src/components/SlideshowCarousel.importable.tsx

@@ -112,6 +112,14 @@ const scrollingDotStyles = css`
 	}
 `;
 
+const mediaOverlayStyles = css`
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 100%;
+	width: 100%;
+`;
+
 type Props = {
 	images: readonly DCRSlideshowImage[];
 	imageSize: MediaSizeType;
@@ -236,6 +244,10 @@ export const SlideshowCarousel = ({
 										</figcaption>
 									)}
 								</figure>
+								<div
+									css={mediaOverlayStyles}
+									className="media-overlay"
+								/>
 							</li>
 						);
 					})}

dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomFeatureCardOverlay.tsx

@@ -42,9 +42,9 @@ const hoverStyles = css`
 	:hover .media-overlay {
 		position: absolute;
 		top: 0;
+		left: 0;
 		width: 100%;
 		height: 100%;
-		left: 0;
 		background-color: ${palette('--card-background-hover')};
 	}