Black transparent overlay on image hover with only CSS

Question

I m trying to add a transparent black overlay to an image whenever the mouse is hovering over the image with only CSS   Is this possible   I tried this    http   jsfiddle net Zf5am 565   But I can t get the div to show up      lt div class  image  gt       lt img src  http   www newyorker com online blogs photobooth NASAEarth-01 jpg  alt      gt       lt div class  overlay    gt   lt  div gt     image     position  relative    border  1px solid black    width  200px    height  200px     image img     max-width  100     max-height  100      overlay     position  absolute    top  0    left  0    display  none    background-color  red    z-index  200     overlay hover     display  block

User · Answer

You can accomplish this by playing with the opacity of the image and setting the background color of the image to black. By making the image transparent, it will appear darker.

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
</div>

CSS:

.image { position: relative; border: 1px solid black; width: 200px; height: 200px; background: black; }
.image img { max-width: 100%; max-height: 100%; }
.image img:hover { opacity: .5 }

You might need to set the browser-specific opacity too to make this work in other browsers too.

User · Answer

I d suggest using a pseudo element in place of the overlay element  Because pseudo elements can t be added on enclosed img elements  you would still need to wrap the img element though  LIVE EXAMPLE HERE -- EXAMPLE WITH TEXT  lt div class  quot image quot  gt       lt img src  quot http   i stack imgur com Sjsbh jpg quot  alt  quot  quot    gt   lt  div gt   As for the CSS  set optional dimensions on the  image element  and relatively position it  If you are aiming for a responsive image  just omit the dimensions and this will still work  example   It s just worth noting that the dimensions must be on the parent element as opposed to the img element itself  see   image       position  relative      width  400px      height  400px     Give the child img element a width of 100  of the parent and add vertical-align top to fix the default baseline alignment issues   image img       width  100       vertical-align  top     As for the pseudo element  set a content value and absolutely position it relative to the  image element  A width height of 100  will ensure that this works with varying img dimensions  If you want to transition the element  set an opacity of 0 and add the transition properties values   image after       content    A       position  absolute      width  100   height 100       top 0  left 0      background rgba 0 0 0 0 6       opacity  0      transition  all 1s      -webkit-transition  all 1s     Use an opacity of 1 when hovering over the pseudo element in order to facilitate the transition   image hover after       opacity  1     END RESULT HERE  If you want to add text on hover  For the simplest approach  just add the text as the pseudo element s content value  EXAMPLE HERE  image after       content   Here is some text         color   fff          Other styling         That should work in most instances  however  if you have more than one img element  you might not want the same text to appear on hover  You could therefore set the text in a data-  attribute and therefore have unique text for every img element  EXAMPLE HERE  image after       content  attr data-content       color   fff     With a content value of attr data-content   the pseudo element adds the text from the  image element s data-content attribute   lt div data-content  quot Text added on hover quot  class  quot image quot  gt       lt img src  quot http   i stack imgur com Sjsbh jpg quot  alt  quot  quot    gt   lt  div gt   You can add some styling and do something like this  EXAMPLE HERE In the above example  the  after pseudo element serves as the black overlay  while the  before pseudo element is the caption text  Since the elements are independent of each other  you can use separate styling for more optimal positioning   image after   image before       position  absolute      opacity  0      transition  all 0 5s      -webkit-transition  all 0 5s     image after       content    A       width  100   height 100       top  0  left 0      background rgba 0 0 0 0 6      image before       content  attr data-content       width  100       color   fff      z-index  1      bottom  0      padding  4px 10px      text-align  center      background   f00      box-sizing  border-box      -moz-box-sizing border-box     image hover after   image hover before       opacity  1

User · Answer

See what I ve done here  http   jsfiddle net dyarbrough93 c8wEC   First off  you never set the dimensions of the overlay  meaning it wasn t showing up in the first place  Secondly  I recommend just changing the z-index of the overlay when you hover over the image  Change the opacity   color of the overlay to suit your needs       image   position  relative  width  200px  height  200px    image img   max-width  100   max-height  100      overlay   position  absolute  top  0  left  0  background-color  gray  z-index  -10  width  200px  height  200px  opacity  0 5   image hover  overlay   z-index  10

User · Answer

CSS3 filter

Although this feature is only implemented in webkit, and it doesn't have browser compatibility, but It's worth taking a look at:

.image img {
    max-width: 100%;
    max-height: 100%;
    -webkit-transition: .2s all;
}

.image img:hover {
    -webkit-filter: brightness(50%);
}

JSFiddle Demo

References

Similar topics on SO

User · Answer

Here s a good way using  after on the image div  instead of the extra overlay div  http   jsfiddle net Zf5am 576    lt div class  image  gt       lt img src  http   www newyorker com online blogs photobooth NASAEarth-01 jpg  alt      gt   lt  div gt    image  position relative  border 1px solid black  width 200px  height 200px    image img  max-width 100   max-height 100     image hover after  content     position absolute  top 0  left 0  bottom 0  right 0  background-color  rgba 0 0 0 0 3

User · Answer

You were close  This will work    image   position  relative  border  1px solid black  width  200px  height  200px     image img   max-width  100   max-height  100      overlay   position  absolute  top  0  left  0  right 0  bottom 0  display  none  background-color  rgba 0 0 0 0 5      image hover  overlay   display  block      You needed to put the  hover on image  and make the  overlay cover the whole image by adding right 0  and bottom 0   jsfiddle  http   jsfiddle net Zf5am 569

User · Answer

I would give a min-height and min-width to your overlay div of the size of the image  and change the background color on hover   overlay   position  absolute  top  0  left  0   z-index  200  min-height 200px  min-width 200px  background-color  none    overlay hover   background-color  red

User · Answer

overlay didn t have a height or width and no content  and you can t hover over display none   I instead gave the div the same size and position as  image and changes RGBA value on hover   http   jsfiddle net Zf5am 566    image   position  absolute  border  1px solid black  width  200px  height  200px  z-index 1    image img   max-width  100   max-height  100      overlay   position  absolute  top  0  left  0  background rgba 255 0 0 0   z-index  200  width 200px  height 200px     overlay hover   background rgba 255 0 0  7

[css] Black transparent overlay on image hover with only CSS?

The answer is

CSS3 filter

References

Similar topics on SO

Examples related to css

Tags