Darkening an image with :hover

HTML

<button class="view_new">
    <div class="a">
    <img src="http://upload.wikimedia.org/wikipedia/en/thumb/2/2a/Burj_Al_Arab,_Dubai,_by_Joi_Ito_Dec2007.jpg/220px-Burj_Al_Arab,_Dubai,_by_Joi_Ito_Dec2007.jpg" alt="Dubai" />
    </div>
</button>

CSS

.view_new {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
    background-color: white;
}
.view_new .a {
    margin: 10px;
}

.view_new img {
    display: block;
}

.view_new:hover .a {
    background-color: black;
}

.view_new:hover img {
    opacity: 0.4;
}