css transition

css :



.status{

position:absolute;
top:0;
height:100%;
opacity:0;
-webkit-transition:opacity 1s ease-in;
moz-transition:opacity 1s ease-in;
o-transition:opacity 1s ease-in;
transition:opacity 1s ease-in;
}
.status h2{
margin-top:130px;
padding: 15px 0px;
width:100%;
background-color:rgb(168,68,163);
color : white;
text-align:center;
}

.status:hover{
opacity:.8;
}

html:

<div class="imageboxes" style="margin-left: 20px;">

    

    <p>The Mechanic</p>

    <img width="300" height="456" alt="mechanic" src="2016/mechanic.jpg">

    <div class="status">

<h2> Released july 15</h2>

    </div>

</div>