Skip to content

Commit e9b2b80

Browse files
Update custom.scss
1 parent 4fb6592 commit e9b2b80

1 file changed

Lines changed: 13 additions & 8 deletions

File tree

_sass/custom/custom.scss

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -42,17 +42,22 @@
4242

4343
.image-container {
4444
position: relative; /* Enables layering */
45-
flex-shrink: 0;
46-
width: 290px;
47-
height: 160px;
48-
overflow: hidden; /* Ensures no content spills outside */
45+
flex-shrink: 0; /* Prevents shrinking */
46+
width: 290px; /* Fixed width */
47+
height: 160px; /* Fixed height */
48+
overflow: hidden; /* Prevents overflow */
49+
margin: 0;
4950
}
5051

5152
.image-container img {
52-
display: block; /* Prevents inline spacing issues */
53-
width: 100%;
54-
height: 100%;
55-
object-fit: cover; /* Ensures the image fills its container proportionally */
53+
display: block; /* Removes inline spacing */
54+
width: 100%; /* Ensures the image fills its container width */
55+
height: 100%; /* Ensures the image height matches the container */
56+
object-fit: cover; /* Makes the image fit neatly */
57+
mask-image: linear-gradient(to right, black, transparent); /* Left-to-right fade */
58+
-webkit-mask-image: linear-gradient(to right, black, transparent); /* WebKit compatibility */
59+
mask-size: cover; /* Ensures the mask spans the entire image */
60+
-webkit-mask-size: cover; /* Ensures compatibility with WebKit */
5661
}
5762

5863
/* Left-to-right fade effect */

0 commit comments

Comments
 (0)