From ae838f3222941ec8859fc48caa0ce58b5b2d0602 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 28 Feb 2026 21:48:02 +0000
Subject: [PATCH] Adjust image display to ensure top portion is always visible

Modify the FeaturedHeroCard component to use 'center top' for object-position, ensuring that the top edge of images is consistently visible in the hero carousel.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 247e411c-1838-41a4-ae5c-3524f9d1fb96
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/0ZGabQy
Replit-Helium-Checkpoint-Created: true
---
 client/src/pages/home.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index ba02c60..22d35e6 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -262,12 +262,11 @@ function TopStoriesList({ articles }: { articles: Article[] }) {
 
 function FeaturedHeroCard({ article, focalPoints }: { article: Article; focalPoints?: Record<string, { x: number; y: number }> }) {
   const isVideo = article.category === "Video";
-  const objPos = getObjectPosition(article.coverImage, focalPoints);
   return (
     <Link href={`/article/${article.slug}`}>
       <div className="relative group cursor-pointer rounded-lg overflow-hidden h-full" data-testid={`card-featured-hero-${article.id}`}>
         <div className="relative h-full min-h-[260px]">
-          <img src={article.coverImage || ""} alt={article.title} className="w-full h-full object-cover absolute inset-0 transition-transform duration-700 group-hover:scale-105" style={{ objectPosition: objPos }} loading="lazy" />
+          <img src={article.coverImage || ""} alt={article.title} className="w-full h-full object-cover absolute inset-0 transition-transform duration-700 group-hover:scale-105" style={{ objectPosition: "center top" }} loading="lazy" />
           {isVideo && (
             <div className="absolute inset-0 flex items-center justify-center z-10">
               <div className="w-14 h-14 rounded-full bg-primary/90 flex items-center justify-center group-hover:bg-primary transition-colors shadow-lg">