Black gradient layer over an IMG without using linear-gradient? - html

Question

I have an img tag and I want to add another gradient div layer on top of it ( that gradient div will have text).
Something like this :
I already know that I can do this with linear-gradient but I don't want that becuase not all mobile versions supports this feature.
Also - I've already seen that it can be achieved via box-shadow with inset
But it's not the same. I only want top and bottom gradient - without any differences on the edges. ( just like in my first picture here ^)
This is what i've tried : JSBIN
But again , I don't want the edges to be darker. I want only the strip in the red rectangle to be from left to right.And also - symmetric - in the bottom ( same gradient should be at the bottom).
Question
How can I fix my code to achieve straight-equal gradients in top and bottom without using linear-gradient ?
NB
I need to add text on that gradient div ( text is from DB) . So It can not be a pseudo ::before/::after element div.

Answer 1

By using multiple shadows you can target the sides you want.
Here done setting the spread radius (4:th parameter) of the blur to a negative value, keeping it from spreading along the sides, and use the horizontal and vertical offset of the shadow to, in this case, target only the top and bottom.
.innerDiv
{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background :transparent;
opacity:1;
border:solid 1px red;
padding:5px;
z-index:92299;
box-shadow:
inset 0 50px 50px -40px rgba(0,0,0,1),
inset 0 -50px 50px -40px rgba(0,0,0,1);
}
<div style='position:relative;border:solid 1px lightgray;height:400px'>
<div class='innerDiv'>
Some text
</div>
<img src='http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg' height="400px" />
</div>
Based on earlier comments, here is a pseudo element version producing the exact same result, and by using the CSS attr() avoiding the issue of compile time data in the CSS.
I also added a script to show the text can be added dynamically as well.
window.addEventListener('load', function() {
var div = document.querySelector('div');
var text = div.getAttribute('data-text');
div.setAttribute('data-text', text + ', and this were added dynamically using script');
})
div
{
position:relative;
}
div::after
{
content: attr(data-text);
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background :transparent;
opacity:1;
border:solid 1px red;
padding:5px;
z-index:92299;
box-shadow:
inset 0 50px 50px -40px rgba(0,0,0,1),
inset 0 -50px 50px -40px rgba(0,0,0,1);
}
<div style='position:relative;border:solid 1px lightgray;height:400px' data-text="Some text set using an attribute in the markup">
<img src='http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg' height="400px" />
</div>

Answer 2

As I also suggested in comment that if you can achieve this using pseudo elements as ::after and ::before of your img container DOM element.
You can define the pseudo elements and then play with the box-shadow to replicating that gradient effect.
Here I have made some changes in your DOM structure as:
Code Snippet:
.img-container {
position: relative;
}
.img-container img {
max-width: 100%;
}
.img-container::after,
.img-container::before {
content: "";
display: inline-block;
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 50px;
}
.img-container::before {
top: 0;
-webkit-box-shadow: 0px 25px 16px -10px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0px 25px 16px -10px rgba(0, 0, 0, 0.5) inset;
}
.img-container::after {
bottom: 0;
-webkit-box-shadow: 0px -25px 16px -10px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0px -25px 16px -10px rgba(0, 0, 0, 0.5) inset;
}
<div class="img-container">
<img src='http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg' height="400px" />
</div>

Answer 3

(using the answer of #vivekkupadhyay as example) you could just make an overlay div and give this the inset shadow. Then you can add whatever content you want.
.img-container,
.img-overlay {
position: absolute;
top: 0;
left 0;
}
.img-container {
overflow: hidden;
}
.img-container img {
max-width: 100%;
}
.img-overlay {
width: 120%;
height: 100%;
-webkit-box-shadow: inset 0px 0px 25px 5px rgba(0,0,0,0.75);
box-shadow: inset 0px 0px 25px 5px rgba(0,0,0,0.75);
margin-left: -25px;
padding: 0px 30px;
color: white;
}
<div class="img-container">
<img src='http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg' height="400px" />
<div class="img-overlay">
some text
</div>
</div>
EDIT: you could also make two seperate overlay div's for top and bottom if you want the to both have content, but this is just a quick example.