Darken background image on hover

Question

How would I darken a background image on hover without making a new darker image?

CSS:

.image {
  background: url(\         


        

Answer 1

How about this, using an overlay?

.image:hover > .overlay {
    width:100%;
    height:100%;
    position:absolute;
    background-color:#000;
    opacity:0.5;
    border-radius:30px;
}

Demo