CODEWITHSUNDEEP
htmlcss
Royi Namir
Royi Namir

Reputation: 148524

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

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 :

enter image description here

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

enter image description here

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

enter image description here

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.

Upvotes: 1

Views: 783

Answers (3)

Rein
Rein

Reputation: 103

(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.

Upvotes: 1

Asons
Asons

Reputation: 87191

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>

Upvotes: 2

vivekkupadhyay
vivekkupadhyay

Reputation: 2891

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>

Upvotes: 2

Related Questions