How to achieve this gradient using valid HTML & CSS only - css

Question

I am interested in a similar gradient style as on the EE mobile network (https://ee.co.uk/) site (see screenshot attached) homepage carousel but I noticed the gradient is part of the image. I want to achieve the gradient using CCS only with minimial HTML mark up neccessay.
Thanks

Answer 1

If you mean the black to transparent gradient, on top of the image add a div a add the css class:
.gradient { background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 43%, rgba(0,0,0,0) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(43%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0))); background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 43%,rgba(0,0,0,0) 100%); background: -o-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 43%,rgba(0,0,0,0) 100%); background: -ms-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 43%,rgba(0,0,0,0) 100%); background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 43%,rgba(0,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ); }
This should work on most browsers.
Your html should be something like this:
<div class="image">
<img src="myImage.jpg">
<div class="gradient"><p>My caption</p></div>
</div>
Now on you css set the size on .image, .image img and .gradient and make sure .gradient is position:absolute
.image { width:600px; height:300px; position:relative; }
.image img { width:600px; height:300px; position:relative; z-index:0; }
.image .gradient { width:400px; height:300px; position:absolute; top:0; left:0; background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 43%, rgba(0,0,0,0) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(43%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0))); background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 43%,rgba(0,0,0,0) 100%); background: -o-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 43%,rgba(0,0,0,0) 100%); background: -ms-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 43%,rgba(0,0,0,0) 100%); background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 43%,rgba(0,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ); }

Answer 2

You can use the following:
#MyDiv {
height:150px;
background: #099;
background: -moz-linear-gradient(top,#009c9c 0,#36b5b6 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#009c9c),color-stop(100%,#36b5b6));
background: -webkit-linear-gradient(top,#009c9c 0,#36b5b6 100%);
background: -o-linear-gradient(top,#009c9c 0,#36b5b6 100%);
background: -ms-linear-gradient(top,#009c9c 0,#36b5b6 100%);
background: linear-gradient(to bottom,#009c9c 0,#36b5b6 100%);
box-shadow: 0 1px 3px 0 #666;
}
<div id= "MyDiv"></div>
also you can use the following URL to get any kind of gradient you may preffer:
http://www.colorzilla.com/gradient-editor/

Answer 3

Here is the working example on [JSFiddle][1]
http://jsfiddle.net/3jdg2/