Roll over image, Roll over text

Roll over Image and darken image. Roll over text and darken image and text.

by Nirvanachain

HTML

<div class="image">
    <div class="hoveroverlay">
        <h1>test</h1>
    </div>
</div>

CSS

.image {
    width:150px;
    height:150px;
    background-image:url(http://media.thethousands.com.au/media_versions/2013/07/08/14/01/55/409/3t_412_ills.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;    
}
.image:hover .hoveroverlay{
    background-color:rgba(0, 0, 0, .8);
    width:100%;
    height:100%;
    background-image: url(http://assets.thethousands.com.au/assets/audio-icon-abf326d264748edcf10daa48aae069ba.svg);
    background-position:center;
    background-size:50px;
    background-repeat:no-repeat;
    position:relative;
}
.hoveroverlay h1 {
display:block;
    text-align:center;
    color:black ;
    position:fixed;
    width:150px;
    margin-top:150px
}
h1:hover {color:green;}