CODEWITHSUNDEEP
csslinear-gradientsgradient
Schonge
Schonge

Reputation: 340

Transparent gradient for top and bottom of background image css

Is it possible to place transparent gradients over both the top and the bottom of a background image? At the moment I can only find it being done on one or the other.

UPDATE:

Tried by putting 2 with in the area that the background image is being applied then used two classes(one the reverse of the other to try and create the desired effect but it didn't quite workout. I'd also like it if possible if it didn't affect any other content and it's positioning within the section it is being applied.

CSS

.picture-gradient {
z-index: 1;
height: 50px;
width: auto;
position: relative;
background: -webkit-linear-gradient(rgba(64,64,64,1), rgba(64,64,64,0)); 
background: -o-linear-gradient(rgba(64,64,64,1), rgba(64,64,64,0)); 
background: -moz-linear-gradient(rgba(64,64,64,1), rgba(64,64,64,0)); 
background: linear-gradient(rgba(64,64,64,1), rgba(64,64,64,0));
padding: 15px;
margin: -15px;
}

.picture-gradient2 {
z-index: 1;
height: 50px;
width: auto;
position: relative;
background: -webkit-linear-gradient(rgba(64,64,64,0), rgba(64,64,64,1)); 
background: -o-linear-gradient(rgba(64,64,64,0), rgba(64,64,64,1)); 
background: -moz-linear-gradient(rgba(64,64,64,0), rgba(64,64,64,1)); 
background: linear-gradient(rgba(64,64,64,0), rgba(64,64,64,1)); 
padding: 15px;
margin: -15px;
}

HTML(Basic)

<div id="photo-place-holder">
    <div class="picture-gradient2"></div>

    enter code here

    <div>
        <p>Text</p>
        <p>More Text</p>
    </div>

    <div id="search-bar2">
        <form class="form-wrapper2 searchbar2">
            <table id="search-table" cellpadding="0" cellspacing="0">
                <tr>
                    <td><input type="text" placeholder="Search for activities and places" required /></td>
                    <td><button type="submit"><img src="Logos/search_white_48px.png" height="28px" width="28px" /></button></td>
                </tr>
            </table>
        </form>
    </div>

    <div id="search-categories"></div>
    <div id="photo-details"></div>
    <div class="picture-gradient2"></div>
</div>

Upvotes: 6

Views: 34091

Answers (2)

xec
xec

Reputation: 18024

You can have multiple stops in a gradient, so if you wanted the top 10% to fade to transparent and the bottom 10% to fade back, you could do something like this:

background-image: linear-gradient(
    to bottom,
    rgba(64, 64, 64, 1) 0%,
    rgba(64, 64, 64, 0) 10%,
    rgba(64, 64, 64, 0) 90%,
    rgba(64, 64, 64, 1) 100%
);

Demo:

.photo {
    background-image: 
        linear-gradient(
            to bottom, 
            rgba(64,64,64,1) 0%, 
            rgba(64,64,64,0) 10%, 
            rgba(64,64,64,0) 90%, 
            rgba(64,64,64,1) 100%
        ),
        url(https://picsum.photos/200/150);
    height: 150px;
    width: 200px;
}
<div class="photo"></div>

Upvotes: 14

gaynorvader
gaynorvader

Reputation: 2657

Something like this?

JsFiddle

http://jsfiddle.net/r3wN8/

CSS

background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(41,137,216,1) 50%, rgba(125,185,232,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(41,137,216,1)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(41,137,216,1) 50%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(41,137,216,1) 50%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(41,137,216,1) 50%,rgba(125,185,232,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(41,137,216,1) 50%,rgba(125,185,232,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#007db9e8',GradientType=0 ); /* IE6-9 */

Generated by http://www.colorzilla.com/gradient-editor/

Upvotes: 3

Related Questions