Вот макет
.service_thumb {
width: 100%;
height: 555px;
margin: 15px;
overflow: hidden;
position: relative;
}
.service_thumb:before {
display: block;
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 3;
background: -moz-linear-gradient(45deg, rgba(0,0,0,0.81) 0%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(45deg, rgba(0,0,0,0.81) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(45deg, rgba(0,0,0,0.81) 0%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cf000000', endColorstr='#00000000',GradientType=1 );
}
.service_thumb img {
display: block;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
<div class="service_thumb">
<img src="img/images/img_05.jpg" alt="" />
</div>
Не получается сделать правильно подложку с полупрозрачным градиентом над картинкой. Как его сделать?