Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Transparent (opacity) image from top 0% to bottom 100% in CSS

Transparent (opacity) image from top 0% to bottom 100% in CSS

Problem

Its possible do it? Just in CSS, like this picture, so I mean if I put on

tag background image, I need it to be Transparent from top to bottom.

I want to create something similar to the image below:

Problem courtesy of: Edoras

Solution

As other answers state : making the image transparent from top to bottom is not possible in CSS.

BUT

If you have a solid background color (or similar) you can simulate that transparency whith CSS3 inset box-shadows.
For the image white overlay and the semi transparent black rectangle. In the following demo, I used pseudo elements to minimize HTML markup.

DEMO

Output :

HTML :

CSS :

.image{
    position:relative;
    height:500px;
    width:500px;
    margin:50px auto;
    background: url('http://lorempixel.com/output/people-q-c-640-480-8.jpg');
    background-size:cover;
    -moz-box-shadow: inset 0px 850px 500px -500px #fff;
    -webkit-box-shadow: inset 0px 850px 500px -500px #fff;
    -o-box-shadow: inset 0px 850px 500px -500px #fff;
    box-shadow: inset 0px 850px 500px -500px #fff;
}
.image:before,.image:after{
    content:'';
    position:absolute;
    left:5%;
    opacity:0.5;
}
.image:before{
    top:0;
    width:20%;
    height:100%;
    -moz-box-shadow: inset 0px 850px 500px -500px #000;
    -webkit-box-shadow: inset 0px 850px 500px -500px #000;
    -o-box-shadow: inset 0px 850px 500px -500px #000;
    box-shadow: inset 0px 850px 500px -500px #000;
}
.image:after{
    width:20%;
    height:10%;
    top:100%;
    background:#000;
}
Solution courtesy of: web-tiki

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Transparent (opacity) image from top 0% to bottom 100% in CSS

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×