File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change 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 */
You can’t perform that action at this time.
0 commit comments