Overlay a Background-Image with an Rgba Color, with a CSS3 Transition

Overlay a background-image with an rgba color, with a CSS3 transition

Yes, it is possible.

demo

.boo {
  position: relative;
  width: 20em; min-height: 10em;
  background: rgba(0,0,0,0) url(http://placekitten.com/320/160);
  transition: background-color 1s;
}
.boo:hover {
  background-color: rgba(0,0,0,.5);
}
.boo:before {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: inherit;
  content: ' ';
}

What am I doing here?

What I am doing here is that I am setting a RGBa background-color on the div, behind its background-image and transitioning this background-color (its alpha) on :hover. All this happens behind the background-image. However, I am also using background-color: inherit on the pseudo-element, which means that, at any given moment, the pseudo-element, which is situated above its parent div (and therefore above the background-image of the div) is going to have the same background-color (meaning that the background-color of the pseudo-element is going to transition from rgba(0,0,0,0) to rgba(0,0,0,.5) on :hover).

---

Why do it this way?

The reason why I am not transitioning directly the background-color of the pseudo-element is that support for transitions on pseudo-elements is still not that good yet.

Support for transitions on pseudo-elements

✓ Firefox supports transitions on pseudo-elements and has supported them for quite a while, let's get this out of the way first.

✗ Current versions of Safari and Opera don't support transitions on pseudo-elements.

Chrome supports transitions on pseudo-elements only starting from version 26.

IE10 supports them in a bit of a weird way, meaning that something like:

.boo:before { color: blue; transition: 1s; }
.boo:hover:before { color: red; }

won't work, you have to specify the hover state on the element itself as well. Like this:

.boo:hover {}
.boo:before { color: blue; transition: 1s; }
.boo:hover:before { color: red; }

---

More info and examples about how you can transition various properties of pseudo-elements using this inherit technique: http://vimeo.com/51897358

---

EDIT

Transitions directly on pseudo-elements are now supported in Opera since the switch to Blink and in Safari since 6.1.

Overlay a background-image with an rgba background-color

The solution by PeterVR has the disadvantage that the additional color displays on top of the entire HTML block - meaning that it also shows up on top of div content, not just on top of the background image. This is fine if your div is empty, but if it is not using a linear gradient might be a better solution:

<div class="the-div">Red text</div>

<style type="text/css">
  .the-div
  {
    background-image: url("the-image.png");
    color: #f00;
    margin: 10px;
    width: 200px;
    height: 80px;
  }
  .the-div:hover
  {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.1))), url("the-image.png");
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
  }
</style>

See fiddle. Too bad that gradient specifications are currently a mess. See compatibility table, the code above should work in any browser with a noteworthy market share - with the exception of MSIE 9.0 and older.

Edit (March 2017): The state of the web got far less messy by now. So the linear-gradient (supported by Firefox and Internet Explorer) and -webkit-linear-gradient (supported by Chrome, Opera and Safari) lines are sufficient, additional prefixed versions are no longer necessary.

How to overlay image with color in CSS?

You should use rgba for overlaying your element with photos.rgba is a way to declare a color in CSS that includes alpha transparency support. you can use .row as an overlayer like this:

#header {
    background: url(../img/bg.jpg) 0 0 no-repeat fixed;
    height: 100%;
    overflow: hidden;
    color: #FFFFFF
 }

.row{
    background: rgba(39,62,84,0.82);
    overflow: hidden;
    height: 100%;
    z-index: 2;
}

How to add a color overlay to a background image?

I see 2 easy options:

• multiple background with a translucent single gradient over image
• huge inset shadow

gradient option:

    html {
      min-height:100%;
      background:linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)), url(https://picsum.photos/id/1043/800/600);
      background-size:cover;
    }

How to add overlay to background image

You could nest two blocks together, one with the background image, and the other with the overlay :

.background{  width: 500px;  height: 500px;  background: url('https://static1.squarespace.com/static/56be46d2a3360cae707270a0/t/5772ef9b20099e38818859b0/1467150245253/');  background-size: cover;}
.overlay{  width: 500px;  height: 500px;  background-color: rgba(0, 0, 0, 0.5);}

<div class="background">  <div class="overlay">    <!-- Content here -->  </div></div>

How to have a background-color overshadow/transition ontop of background-image without a overlay mask?

Is there a way to animate the color to overshadow the image and
animate it to full opacity (white) when hovered?

If you do not need to support IE/Edge, then you could play with the background-blend-mode properties.

^{Note: Tested only with Chrome, and FireFox.}

Example Snippet:

var image = document.createElement("div");image.className = "item-content";image.style.backgroundImage = "url(http://lorempixel.com/200/200)";document.getElementById('wrap').appendChild(image);

.item-content {  width:  200px; height: 200px; border: 2px solid #021a40;   background-size: 100% 100%; background-color: white;  background-blend-mode: color-burn;  transition: background-color .5s;}.item-content:hover { background-color: transparent; }

<div id="wrap"></div>

Semi-transparent color layer over background-image?

Here it is:

.background {
    background:url('../img/bg/diagonalnoise.png');
    position: relative;
}

.layer {
    background-color: rgba(248, 247, 216, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML for this:

<div class="background">
    <div class="layer">
    </div>
</div>

Of course you need to define a width and height to the .background class, if there are no other elements inside of it

CSS Color overlay with background image

Try this

.overlay-image {  width: 300px;  height: 200px;  background: linear-gradient( rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45)),   url(https://www.nepalitrek.com/wp-content/uploads/2017/09/langtang-gosaikundaintro.jpg);}

<div class="overlay-image"></div>

---

Related Topics