Fade image to transparent like a gradient
Solution 1:
If you want this:
You can do this:
<html>
<style type='text/css'>
div, img { position:absolute; top:0; left:0; width:250px; height:250px; }
img {
-webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}
</style>
<body>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet porttitor massa. Morbi eget tortor congue, aliquet odio a, viverra metus. Ut cursus enim eu felis sollicitudin, vitae eleifend urna lobortis. Mauris elementum erat non facilisis cursus. Fusce sit amet lacus dictum, porta libero sed, euismod tellus. Aenean erat augue, sodales sed gravida ac, imperdiet ac augue. Ut condimentum dictum mauris. Donec tincidunt enim a massa molestie, vel volutpat massa dictum. Donec semper odio vitae adipiscing lacinia.</div>
<img src='https://i.imgur.com/sLa5gg2.jpg' />
</body>
</html>Solution 2:
If you just want to fade to the background color (white, in this case) see the working example here:
http://jsfiddle.net/yw9v7zm5/
.css for the image container div uses:
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(80%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
Solution 3:
2021 update: 'mask-image' is partially supported. The mask image (In this case a linear-gradient) is set on the parent element (.image_preview_container). The children (.image_preview) start fading into transparency at 50% in this example. Then are completely transparent at 100%. (Can also use other lengths like 'px')
It's working in firefox. And possibly in others. This worked for me so far. Please comment if doesn't work for your browser.
CSS:
.image_preview_container {
mask-image: linear-gradient(to right, rgba(0, 0, 0, 1.0) 50%, transparent 100%);
}
.image_preview {
background-image: url("IMAGE LOCATION");
}
HTML:
<div class="image_preview_container">
<div class="image_preview"></div>
</div>
In the context of the original question:
CSS:
.parent{
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1.0) 50%, transparent 100%);
}
.child{
background-image: url("splash_bottom3.png");
}
HTML:
<div class="parent">
<div class="child"></div>
</div>