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

21 votes179 views3 answers
Disable cursor css
CSS
0 vote119 views1 answer
Format hexagonal css get
CSS
0 vote149 views1 answer
Bootstrap create full screen background image
CSS Bootstrap
10 votes145 views2 answers
Css list items next to each other
CSS
2 votes122 views1 answer
Slide up and down animation css
CSS
2 votes131 views5 answers
Tailwind css margin auto
CSS
0 vote115 views1 answer
Css layers over background-images
CSS
4 votes135 views1 answer
Make text bigger html5
CSS
0 vote106 views1 answer
Why is there whitespace on the top
CSS
50 votes112 views5 answers
Child css
CSS