CSS: Getting text to appear above the gradient in my div

Question

I'm working on a news aggregation site's homepage and we're supposed to have a couple of areas that pull in content with the photo in the background and text on top with a gradient between the two. For the most part I have it except even though the z-index is lower, the gradient still appears above the text box. I've already experimented with this on a solid background just to be sure. The code and example are here: http://jsfiddle.net/cx0uvshd/

<style type="text/css">
    .feature {
        position: relative;
        float: left; 
        width: 465px; 
        height: 170px;  
        margin-top: 24px; 
        margin-right: 30px; 
    }
    .feature.last { 
        margin-right: 0; 
    }
    .feature-bottom {
        background: none;
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 0 30px 6px;
        width: 100%;
        z-index: 200;
        line-height: 1;
    }
    .feature-bottom::after {
        content: "";
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: rgba(0,0,0,0);
        background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,0.5)), color-stop(100%, rgba(0,0,0,0.5)));
        background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
        background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
        background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
    }
    .feature-bottom h3 { 
        color: #FFF; 
        font-size: 15px; 
        font-weight: 400; 
        margin: 0; 
    }
    .feature-bottom h2 { 
        color: #FFF; 
        font-size: 24px; 
        font-weight: 400; 
        margin: 0; 
    }
</style>

score 0 · Accepted Answer · answered Apr 06 '15 at 02:21

Add (position:relative) and (z-index:201) to your feature-bottoms h3 and h2. Find revised code below:

.feature { position: relative; float: left; width: 465px; height: 170px;  margin-top: 24px; margin-right: 30px; }
.feature.last { margin-right: 0; }
.feature-bottom {
    background: none;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 30px 6px;
    width: 100%;
    z-index: 200;
    line-height: 1;
}
.feature-bottom::after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: rgba(0,0,0,0);
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,0.5)), color-stop(100%, rgba(0,0,0,0.5)));
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
    background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
    background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
}
.feature-bottom h3 { position:relative; z-index:201; color: #FFF; font-size: 15px; font-weight: 400; margin: 0; }
.feature-bottom h2 { position:relative; z-index:201; color: #FFF; font-size: 24px; font-weight: 400; margin: 0; }

score 0 · Answer 2 · edited May 23 '17 at 12:01

0

Why not applying gradient to .feature-bottom? Like this: http://jsfiddle.net/cx0uvshd/2/

In the current version you have the :before element overlaying despite bigger z-index. You need new stacking context

Here's a similar question

edited May 23 '17 at 12:01

Community

1
1

answered Apr 06 '15 at 02:28

knitevision

3,023
6
29
44

score 0 · Answer 3 · answered Apr 06 '15 at 02:39

A not so clean solution is to add another div with the content below the gradient one. Then give that div a class that is a copy of feature-bottom. Then set color of feature-bottom to transparent to hide the text. Also change the last two selectors to use the copy class. Also duplicate the last two selectors to use for the new class. JsFiddle

CSS:

    .feature { position: relative; float: left; width: 465px; height: 170px; margin-top: 24px; margin-right: 30px; }
    .feature.last { margin-right: 0; }

/*Copy of feature bottom*/
.feature-bottom2 {
background: none;
position: absolute;
bottom: 0;
left: 0;
padding: 0 30px 6px;
width: 100%;
z-index: 200;
line-height: 1;
}
.feature-bottom {
    color: transparent;
background: none;
position: absolute;
bottom: 0;
left: 0;
padding: 0 30px 6px;
width: 100%;
z-index: 200;
line-height: 1;
}
.feature-bottom::after {
content: "";
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100;
background: rgba(0,0,0,0);
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,0.5)), color-stop(100%, rgba(0,0,0,0.5)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',  GradientType=0 );
}
/* Copy of below*/
.feature-bottom2 h3 { color: #FFF; font-size: 15px; font-    weight: 400; margin: 0; }
.feature-bottom2 h2 { color: #FFF; font-size: 24px; font-weight: 400; margin: 0; }

.feature-bottom h3 { font-size: 15px; font-weight: 400; margin: 0; }
.feature-bottom h2 { font-size: 24px; font-weight: 400; margin: 0; }

CSS: Getting text to appear above the gradient in my div

3 Answers3