Merge pull request #13589 from guardian/doml/fix-hover-media-card

On card hover, stop background colour covering padding of image

Author: domlander

dotcom-rendering/src/components/Card/components/CardWrapper.tsx

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

dotcom-rendering/src/components/Card/components/ImageWrapper.tsx

@@ -44,10 +44,17 @@ type Props = {
 	padImage?: boolean;
 };
 
+const imageOverlayContainerStyles = css`
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+`;
+
 /**
  * This function works in partnership with its sibling in `ContentWrapper`. If you
  * change any values here be sure to update that file as well.
- *
  */
 const flexBasisStyles = ({
 	imageSize,
@@ -179,7 +186,18 @@ export const ImageWrapper = ({
 				{children}
 				{/* This image overlay is styled when the CardLink is hovered */}
 				{(imageType === 'picture' || imageType === 'slideshow') &&
-					!hideImageOverlay && <div className="image-overlay" />}
+					!hideImageOverlay && (
+						<div
+							css={[
+								imageOverlayContainerStyles,
+								padImage && imagePadding,
+							]}
+						>
+							{/* This child div is needed as the hover background colour covers the padded
+							    area around the image when the hover styles are applied to the top-level div */}
+							<div className="image-overlay" />
+						</div>
+					)}
 			</>
 		</div>
 	);

dotcom-rendering/src/components/FeatureCard.tsx

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

dotcom-rendering/src/components/FlexibleGeneral.stories.tsx

@@ -182,7 +182,6 @@ export const TwoSublinkSplash: Story = {
 		groupedTrails: {
 			...defaultGroupedTrails,
 			splash: [{ ...splashCard, supportingContent: getSublinks(2) }],
-			standard: standardCards,
 		},
 	},
 };
@@ -198,7 +197,6 @@ export const FourSublinkSplash: Story = {
 		groupedTrails: {
 			...defaultGroupedTrails,
 			splash: [splashWithFourSublinks],
-			standard: standardCards,
 		},
 	},
 };
@@ -273,7 +271,6 @@ export const FourSublinkSplashWithLiveUpdates: Story = {
 		groupedTrails: {
 			...defaultGroupedTrails,
 			splash: [liveUpdatesCard],
-			standard: standardCards,
 		},
 	},
 	render: ({ frontSectionTitle, ...args }) => {
@@ -303,7 +300,6 @@ export const BoostedSplash: Story = {
 					boostLevel: 'boost',
 				},
 			],
-			standard: standardCards,
 		},
 	},
 };
@@ -320,7 +316,6 @@ export const MegaBoostedSplash: Story = {
 					boostLevel: 'megaboost',
 				},
 			],
-			standard: standardCards,
 		},
 	},
 };
@@ -337,7 +332,6 @@ export const GigaBoostedSplash: Story = {
 					boostLevel: 'gigaboost',
 				},
 			],
-			standard: standardCards,
 		},
 	},
 };