CODEWITHSUNDEEP
cssbackgroundgradientoverlap
jchitel
jchitel

Reputation: 3169

CSS show div background over image element

I have this HTML: demo

<div class="container">
    <img class="image" src="someUrl">
    <div class="gradientDown"></div>
    <div class="gradientUp"></div>
</div>

with this CSS:

.container {
    position:relative;
    width:100%;
    height:100%;
    padding-top:70.5px;
}

.gradientDown {
    position:absolute;
    top:0;
    width:100%;
    height:100px;
    background:linear-gradient(to bottom, rgba(40,40,40,1), rgba(40,40,40,0));
}

.gradientUp {
    position: absolute;
    bottom:0;
    width:100%;
    height:100px;
    background:linear-gradient(to top, rgba(40,40,40,1), rgba(40,40,40,0));
}

I would like the gradient divs to overlap over the image, which is visibly hovering between them. I've tried tweaking around the z-indexes, positions, and displays, and I can't seem to find a way to do it. They always come out underneath the image.

Upvotes: 1

Views: 3124

Answers (3)

Mad Angle
Mad Angle

Reputation: 2330

<html>
<head>
    <style>
        div{
            position:  relative;
        }
        .container {
            position:relative;
            width:100%;
            height:100%;
            padding-top:70.5px;
        }

        .gradientDown {
            position:relative;
            margin-top: -300px;
            top:0;
            width:100%;
            height:100px;
            background:linear-gradient(to bottom, rgba(40,40,40,1), rgba(40,40,40,0));
        }

        .gradientUp {
            position: relative;
            bottom:0;
            width:100%;
            height:100px;
            background:linear-gradient(to top, rgba(40,40,40,1), rgba(40,40,40,0));
        }
    </style>
</head>
<body>
<div class="container">
    <div><img class="image" src="someurl"></div>
    <div class="gradientDown"></div>
    <div class="gradientUp"></div>
</div>
</body>
</html>

Upvotes: 0

nwalton
nwalton

Reputation: 2061

z-index doesn't work on elements that have position:static (the default). If you give your img some positioning the z-index should work.

Upvotes: 2

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

*Now Define your img z-index property *

as like this 

img{
    position:relative;
    z-index:1;  
}

Demo

More about z-index

Upvotes: 3

Related Questions