How to darken an image on mouseover and show buttons?

Question

My problem...

I want to darken an image and show buttons on it. When I tried, the buttons got darker too.

I tried this code:

<style>
.image {
    background: url('http://carinapilar.com/wp-content/uploads/MinhasHistorias/Capa.Primeiro.Livro.png');
    background-size:contain;
    width: 250px;
    height: 355px;
    position:relative;
}
.image:hover > .overlay {
    width:100%;
    height:100%;
    position:absolute;
    background-color:#000;
    opacity:0.5;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
}

div.show-image:hover input {
    display: block;
}
div.show-image input {
    position:absolute;
    display:none;
}
div.show-image input.update {
    top:0;
    left:0;
}
div.show-image input.delete {
    top:0;
    left:79%;
}

</style>

<div class="show-image">
    <div class="image">
        <div class="overlay">
            <input class="update" type="button" value="Update" />
            <input class="delete" type="button" value="Delete" />
        </div>
    </div>
</div>

I found only solutions that or bring only the darkened functionality or the buttons on hover... I can't find both together...

Here is the Fiddle.

Answer 1

Try taking the buttons out of the overlay and raising them above the overlay with z-index. Check out a fiddle here .

Things I changed were moving the buttons:

<div class="show-image">
  <div class="image">
    <input class="update" type="button" value="Update" />
    <input class="delete" type="button" value="Delete" />
    <div class="overlay"></div>
  </div>
</div>

and adding the z-index to the inputs:

div.show-image input {
    position:absolute;
    display:none;
    z-index: 10;
}

Answer 2

I got rid of .overlay completely and just used :after .

JSFiddle

The CSS:

.image:after {
    content:'';
    opacity:0;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
}
.image:hover:after {
    width:100%;
    height:100%;
    position:absolute;
    background-color:#000;
    opacity:0.5;
}

.image input {
    z-index:2;
}

HTML:

<div class="show-image">
    <div class="image">
        <input class="update" type="button" value="Update" />
        <input class="delete" type="button" value="Delete" />
    </div>
</div>

I had to give the button z-index so that they would be on top of the fade effect.

Answer 3

Here is your solution.

Just move the input buttons outside div.overlay that you're darkening.

You only need to change your HTML so:

<div class="show-image">
    <div class="image">
        <div class="overlay">
        </div>
        <input class="update" type="button" value="Update" />
        <input class="delete" type="button" value="Delete" />
    </div>
</div>

Unlike @philnash's solution, doesn't need z-index, as the input elements are after div.overlay .