Search code examples
htmlcsscss-gradients

Linear-gradient() over inline <img> tags

I want to create this effects oflinear-gradient over the images:

enter image description here

I tried this code: http://codepen.io/anon/pen/dNZoeJ

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}
.bg-img {
  width: 100%;
  height: 100%;
  background: url('http://unsplash.it/1200x800') center center no-repeat;
  background-size: cover;
}
.bg-img:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to bottom right, #002f4b, #dc4225);
  opacity: .6;
}
<div class="bg-img"></div>

But my images are inline not background, so that doesn't work.

<% review.forEach(function(review) { %>
      <div class="col-md-4 col-sm-6">

        <div class="thumbnail">
          <div class="img">
            <a href="/review/<%= review._id %>"><img src="<%= review.image %>"></a>
          </div>

        </div>

        <div class="caption">
            <a href="/review/<%= review._id %>"><h2><%= review.title %></h2></a>
        </div>

        <span><%= review.created.toDateString(); %></span>

        <div class="relative">
            <p><%- review.body.substring(0,250); %></p>
            <div class="absolute"></div>
        </div>

      </div>
 <% }) %>

Is there any way to achieve the desired effect with inline <img> tags?

Solution

  • You are probably looking for objcet-fit for inline images. It works similarly to background-size. Note, it doesn't work on IE and Edge yet.

    img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}


    html,
body {
  height: 100%;
  margin: 0;
}
.bg-img {
  height: 100%;
  position: relative;
}
.bg-img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}
.bg-img:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to bottom right, #002f4b, #dc4225);
  opacity: .6;
}
    <div class="bg-img">
  <img src="http://unsplash.it/1200x800">
</div>

    Other than that, you may be able to use inline style="background: ..." or <style>...</style> if the container has known width and height.

    Edit

    I made a simple demo with <img> tags like the picture you posted, switch to background images as I mentioned above if you need to support more browsers.

    .hero {
  display: flex;
  height: 200px;
}
.hero div {
  position: relative;
}
.hero img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}
.hero h2 {
  position: absolute;
  bottom: 0;
  left: 0;
  color: white;
  font-weight: normal;
  margin: 10px;
}
.a, .b {
  flex: 1;
}
.b {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.b1, .b2 {
  height: 50%;
}
.a:before,
.b1:before,
.b2:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to bottom right, #002f4b, #dc4225);
  opacity: .6;
}
    <div class="hero">
  <div class="a">
    <img src="http://unsplash.it/600x300?random">
    <h2>Title</h2>
  </div>
  <div class="b">
    <div class="b1">
      <img src="http://unsplash.it/600x400?random">
      <h2>Title</h2>
    </div>
    <div class="b2">
      <img src="http://unsplash.it/600x500?random">
      <h2>Title</h2>
    </div>
  </div>
</div>

    jsFiddle