-
Posts
-
Is it possible to add a simple linear gradient overlay on a grid row? My goal is to have a black-to-transparent gradient (rgba(0,0,0) to rgba(0,0,0,0.1))running from the bottom to the top (0deg) with a width of 50%.
On a color section, I would use the following CSS with the DIV ID of left-right-overlay:
#top #left-right-overlay .av-section-color-overlay {
background: linear-gradient(0deg,rgba(0,0,0),rgba(0,0,0,.1))!important;
width: 50%!important;
min-height: 100%!important;
}But, I do not know how to get it to work on a grid row. Any suggestions?
I found my own answer. Here it is:
#top .home-hero:before {
content: “”;
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
background: linear-gradient(0deg,rgba(0,0,0,0.5),rgba(0,0,0,.1));
}Now, I am trying to figure out how to run the gradient from the bottom to the halfway up to the top Still playing with CSS.
Oh, I just figured that out too. I guess that I was too tired before.
#top .home-hero:before {
content: “”;
position: absolute;
left: 0; right: 0;
top: 50%; bottom: 0;
background: linear-gradient(0deg,rgba(0,0,0,0.5),rgba(0,0,0,.1));
}
- You must be logged in to reply to this topic.