Edit in JSFiddle

<img src='http://picsofcanada.com/images/mowat.jpg' height='280'>
<div class='box'>
    <br>
    <br>
     <h2 style='text-align:center;'>Hover over changes color of the box.<br>Click and hold changes the opacity, size and  text color of the box.</h2>

</div>

.box {
    position:absolute;
    left:0px;
    top:0px;
    width: 400px;
    height: 300px;
    background-color: green;
    color:red;
    opacity: 1;
    -webkit-transition: width 2s ease, height 2s ease, opacity 3s;
    -moz-transition: width 2s ease, height 2s ease, opacity 3s;
    -o-transition: width 2s ease, height 2s ease, opacity 3s;
    -ms-transition: width 2s ease, height 2s ease, opacity 3s;
    transition: width 2s ease, height 2s ease, opacity 3s;
}
.box:active {
    width: 500px;
    height: 500px;
    color:white;
    opacity: 0.0;
}
.box:hover {
    background-color:blue;
}
}