diff --git a/src/components/blogCarousel/blogCard.tsx b/src/components/blogCarousel/blogCard.tsx
index 9800d5fb..40e082ac 100644
--- a/src/components/blogCarousel/blogCard.tsx
+++ b/src/components/blogCarousel/blogCard.tsx
@@ -80,7 +80,9 @@ const BlogCard = ({
     <div className="article-card">
       {/* Image */}
       <div className="card-image">
-        <img src={imageUrl} alt={title} loading="lazy" />
+        <Link to={`/blog/${id}`} className="block" aria-label={`Read ${title}`}>
+          <img src={imageUrl} alt={title} loading="lazy" />
+        </Link>
       </div>
 
       {/* Content */}
@@ -202,4 +204,4 @@ const BlogCard = ({
   );
 };
 
-export default BlogCard;
\ No newline at end of file
+export default BlogCard;
diff --git a/src/components/blogCarousel/blogCarousel.css b/src/components/blogCarousel/blogCarousel.css
index 67dbade2..5c8e9210 100644
--- a/src/components/blogCarousel/blogCarousel.css
+++ b/src/components/blogCarousel/blogCarousel.css
@@ -102,6 +102,12 @@
   flex-shrink: 0;
 }
 
+.card-image a {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
 .card-image::after {
   content: "";
   position: absolute;
@@ -112,6 +118,7 @@
   opacity: 0;
   transition: opacity 0.35s ease;
   z-index: 1;
+  pointer-events: none;
 }
 
 .article-card:hover .card-image::after {
@@ -119,6 +126,7 @@
 }
 
 .card-image img {
+  display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
@@ -157,6 +165,7 @@
   transition: color 0.2s ease;
   display: -webkit-box;
   -webkit-line-clamp: 2;
+  line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
@@ -195,6 +204,7 @@
   margin: 0 0 16px 0;
   display: -webkit-box;
   -webkit-line-clamp: 3;
+  line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   flex: 1;
@@ -635,6 +645,7 @@
   transform: translateY(-20px);
   transition: opacity 0.4s ease-in, transform 0.4s ease-in;
 }
+
 /* ── Reading time ── */
 .card-reading-time {
   display: inline-flex;