Section 9 : remove backgrounds of all images, show only the image

style.css

@@ -12,6 +12,7 @@
   height: 280px;
   width: 100%;
   overflow: hidden;
+  background: transparent;
 }
 .resource-card:hover {
   transform: translateY(-8px);
@@ -26,9 +27,8 @@
   object-position: center;
 }
 .resource-card:hover img {
-  transform: scale(1.05);
+  transform: scale(1.02);
 }
-
 .resource-card .btn-primary {
   transition: all 0.3s ease;
   display: inline-flex;
@@ -39,16 +39,10 @@
 .resource-card:hover .btn-primary {
   box-shadow: 0 4px 12px rgba(0, 32, 96, 0.2);
 }
-
-/* Gradient overlay for images */
+/* Clean image display */
 .resource-card .bg-gradient-to-t {
-  transition: opacity 0.3s ease;
-}
-
-.resource-card:hover .bg-gradient-to-t {
-  opacity: 0.8;
+  display: none;
 }
-
 /* Resource type indicator */
 .resource-card span.text-sm {
   letter-spacing: 0.05em;
@@ -61,10 +55,10 @@
   flex-direction: column;
   flex-grow: 1;
 }
-
 .resource-card .relative {
   height: 100%;
   width: 100%;
+  background: transparent;
 }
 .resource-card h4 {
   transition: color 0.3s ease;
@@ -81,8 +75,9 @@
   }
   .resource-card .relative {
     height: 180px;
+    background: transparent;
   }
-  .resource-card img {
+.resource-card img {
     height: 100%;
   }
 }