How to Make in CSS an Overlay Over an Image

How to make in CSS an overlay over an image?

You can achieve this with this simple CSS/HTML:

.image-container {
    position: relative;
    width: 200px;
    height: 300px;
}
.image-container .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    color: #FFF;
}
.image-container:hover .after {
    display: block;
    background: rgba(0, 0, 0, .6);
}

HTML

<div class="image-container">
    <img src="http://lorempixel.com/300/200" />
    <div class="after">This is some content</div>
</div>

Demo: http://jsfiddle.net/6Mt3Q/

UPD: Here is one nice final demo with some extra stylings.

.image-container {    position: relative;    display: inline-block;}.image-container img {display: block;}.image-container .after {    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    display: none;    color: #FFF;}.image-container:hover .after {    display: block;    background: rgba(0, 0, 0, .6);}.image-container .after .content {    position: absolute;    bottom: 0;    font-family: Arial;    text-align: center;    width: 100%;    box-sizing: border-box;    padding: 5px;}.image-container .after .zoom {    color: #DDD;    font-size: 48px;    position: absolute;    top: 50%;    left: 50%;    margin: -30px 0 0 -19px;    height: 50px;    width: 45px;    cursor: pointer;}.image-container .after .zoom:hover {    color: #FFF;}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="image-container">    <img src="http://lorempixel.com/300/180" />    <div class="after">        <span class="content">This is some content. It can be long and span several lines.</span>        <span class="zoom">            <i class="fa fa-search"></i>        </span>    </div></div>

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 can i add an overlay to an image in css or any other way

Here's one simple method, using a pseudo-element (::before) with a semi-transparent background (black with 50% opacity, defined by rgba) overlayed above an image.

.dark-img {  position: relative;  width: 300px;}
.dark-img img {  display: block;  width: 100%;}
.dark-img::before {  content: '';  position: absolute;  top: 0;  left: 0;  bottom: 0;  right: 0;  z-index: 1;  background: rgba(0, 0, 0, .5);}

<div class="dark-img">  <img src="https://i.imgur.com/qLRD0OC.jpg" /></div>

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(http://lorempixel.com/800/600/nature/2);
  background-size:cover;
}

shadow option:

html {
  min-height:100%;
  background:url(http://lorempixel.com/800/600/nature/2);
  background-size:cover;
  box-shadow:inset 0 0 0 2000px rgba(255, 0, 150, 0.3);
}

an old codepen of mine with few examples

a third option

with background-blen-mode :

The background-blend-mode CSS property sets how an element's background images should blend with each other and with the element's background color.

html {
  min-height:100%;
  background:url(http://lorempixel.com/800/600/nature/2) rgba(255, 0, 150, 0.3);
  background-size:cover;
  background-blend-mode: multiply;
}

CSS: What's a better way to overlay an image over a div border?

You can just change margin-top: -13px with the transform: translateY(-50%); and you will get exactly the same result, and you won't need to calculate the negative pixels.

HTML Image Overlay Positioning

Use relative and absolute positioning to place the background image and the img on top of each other, than make the container a flexbox to center the img tag:

.container {  height: 500px;  width: 700px;  display: flex;  align-items: center;  justify-content: center;  position: relative;}
.container > #backimg {  background-image: url(http://placekitten.com/700/500);  background-position: center center;  background-size: cover;  filter: blur(3px);  width: 100%;  height: 100%;}
.container > img {  width: 50%;}
.container > #backimg,.container > img{   position:absolute;}

<div class="container">  <div id="backimg"></div>  <img src="http://placekitten.com/700/500" /></div>

How do I make an overlay over an image cover the image in a scrollable container

CSS-Grid can do that..no position values required.

.container {  height: 200px;  display: inline-grid;  overflow: auto;}
img,.overlay {  grid-column: 1;  grid-row: 1;}
.overlay {  z-index: 2;  background-image: repeating-linear-gradient( 0deg, transparent, transparent 10px, #eee 10px, #eee 11px), repeating-linear-gradient( -90deg, transparent, transparent 10px, #eee 10px, #eee 11px);}

<div class="container">  <img src="https://lorempixel.com/500/500/" />  <div class="overlay"></div></div>

How to Make in CSS an Overlay Over an Image