Fading bottom image css

.image { position: relative; }
.image img { display: block; position: relative; z-index: 1; width: 100%; }
.image .fade { position: absolute; bottom: 0; width: 100%; height: 150px; z-index: 2; background: rgba(255, 255, 255, 0) linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 80%) repeat scroll 0 0;  }

Source: stackoverflow.com

Similar codes

2 votes381 views1 answer
Check if input is empty css
CSS
3 votes304 views2 answers
Bootstrap 5 pagination
CSS
60 votes341 views6 answers
Center div horizontally and vertically
CSS
18 votes337 views6 answers
Css box sizing
CSS
12 votes325 views6 answers
Responsive text
CSS
4 votes319 views1 answer
How to stop an image repeating in css
CSS
0 vote341 views1 answer
Modern css fonts
CSS
4 votes320 views1 answer
Linear gradient instagram
CSS
0 vote303 views1 answer
Remove background when autofill input css
CSS
1 vote341 views1 answer
How to make button appear on hover
CSS