How to make in CSS an overlay over an image

Question

I am trying to achieve something like this     When I hover over an image  I would like to put on that image this dark color with some text and the icon   I am stuck here  I found some tutorials but they didn t work out for this case  Also  another issue -- every image has a different height  The width is always the same   How can this effect be achieved

User · Answer

A bit late for this  but this thread comes up in Google as a top result when searching for an overlay method   You could simply use a background-blend-mode   foo       background-image  url images image1 png   url images image2 png       background-color  violet      background-blend-mode  screen multiply      What this does is it takes the second image  and it blends it with the background colour by using the multiply blend mode  and then it blends the first image with the second image and the background colour by using the screen blend mode  There are 16 different blend modes that you could use to achieve any overlay   multiply  screen  overlay  darken  lighten  color-dodge  color-burn  hard-light  soft-light  difference  exclusion  hue  saturation  color and luminosity

User · Answer

You could use a pseudo element for this  and have your image on a hover    x000D   x000D   image   x000D    position  relative  x000D    height  300px  x000D    width  300px  x000D    background  url http   lorempixel com 300 300   x000D    x000D   image before   x000D    content      x000D    position  absolute  x000D    top  0  x000D    left  0  x000D    height  100   x000D    width  100   x000D    transition  all 0 8s  x000D    opacity  0  x000D    background  url http   lorempixel com 300 200   x000D    background-size  100  100   x000D    x000D   image hover before   x000D    opacity  0 8  x000D    x000D   lt div class  image  gt  lt  div gt  x000D   x000D   x000D

User · Answer

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   lt div class  image-container  gt       lt img src  http   lorempixel com 300 200    gt       lt div class  after  gt This is some content lt  div gt   lt  div gt    Demo  http   jsfiddle net 6Mt3Q     UPD  Here is one nice final demo with some extra stylings     x000D   x000D   image-container   x000D      position  relative  x000D      display  inline-block  x000D    x000D   image-container img  display  block   x000D   image-container  after   x000D      position  absolute  x000D      top  0  x000D      left  0  x000D      width  100   x000D      height  100   x000D      display  none  x000D      color   FFF  x000D    x000D   image-container hover  after   x000D      display  block  x000D      background  rgba 0  0  0   6   x000D    x000D   image-container  after  content   x000D      position  absolute  x000D      bottom  0  x000D      font-family  Arial  x000D      text-align  center  x000D      width  100   x000D      box-sizing  border-box  x000D      padding  5px  x000D    x000D   image-container  after  zoom   x000D      color   DDD  x000D      font-size  48px  x000D      position  absolute  x000D      top  50   x000D      left  50   x000D      margin  -30px 0 0 -19px  x000D      height  50px  x000D      width  45px  x000D      cursor  pointer  x000D    x000D   image-container  after  zoom hover   x000D      color   FFF  x000D    x000D   lt link href    netdna bootstrapcdn com font-awesome 4 0 3 css font-awesome min css  rel  stylesheet   gt  x000D   x000D   lt div class  image-container  gt  x000D       lt img src  http   lorempixel com 300 180    gt  x000D       lt div class  after  gt  x000D           lt span class  content  gt This is some content  It can be long and span several lines  lt  span gt  x000D           lt span class  zoom  gt  x000D               lt i class  fa fa-search  gt  lt  i gt  x000D           lt  span gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Putting this answer here as it is the top result in Google   If you want a quick and simple way       filter  brightness 0 2      Not compatible with IE

[html] How to make in CSS an overlay over an image?

Examples related to html

Examples related to css

Examples related to image

Examples related to hover

Examples related to opacity