Materialize CSS Transparent Gradient Overlay on Card Image

Question

I'm trying to overlay a transparent gradient to an image card from the Materialize CSS framework. The consensus that I've found online suggests that this should be easily achieved by placing the img tag into a div and applying a gradient background to said div . Then simply moving the z-index of the img tag behind the gradient, thus overlaying it.

However, I'm running into some issue with this approach. For some reason there there seems to be no transparency on my overlay meaning only the gradient can be seen, not the image behind. I presume it's something to do with the materialize framework, is there some way I can work around it?

JSFiddle of my code

HTML:

<div class="row">
    <div class="col s12 m4 l3">
        <div class="card hoverable">
            <div class="card-image postergrad">
                <div class="postergrad">
                    <img class="poster" src="http://vignette2.wikia.nocookie.net/horrormovies/images/e/e1/28-Days-Later-Posters.jpg">
                </div>
                <span class="card-title">28 Days Later</span>
            </div>
            <div class="card-content">
                <p>Lorem ipsum...</p>
            </div>
            <div class="card-action">
                <a href="#">This is a link</a>
            </div>
        </div>
    </div>
</div>

CSS:

.postergrad { 
  background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* IE10+ */
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(     startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}

.poster {
  position:relative;
  z-index:-1;
  display:block;
}

Answer 1

I think you've misunderstood.

You can't set an image in the HTML behind it's own wrappers background..background is background.

You can use the wrappper to create a pseudo-element overlay.

 .postergrad { display: block; position: relative; } .postergrad::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.65)), color-stop(100%, rgba(0, 0, 0, 0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); /* W3C */ filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00000000', GradientType=0); /* IE6-9 */ } .poster { display: block; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" /> <div class="row"> <div class="col s12 m4 l3"> <div class="card hoverable"> <div class="card-image"> <div class="postergrad"> <img class="poster" src="http://vignette2.wikia.nocookie.net/horrormovies/images/e/e1/28-Days-Later-Posters.jpg"> </div> <span class="card-title">28 Days Later</span> </div> <div class="card-content"> <p>Lorem ipsum...</p> </div> <div class="card-action"> <a href="#">This is a link</a> </div> </div> </div>