how do you do this rollover state using CSS - html

Question

http://www.habib-fadel.com/en/artwork/
Please could someone tell me how to do this hover state.
This is my HTML at the moment:
<div class="grid-item">
<a href="#">
<div class="details">
<div class="title">Portrait VII</div>
<div class="icon-cross icon"></div>
</div>
</a>
<img src="images/1.jpg">
</div>

Answer 1

HTML
<div class="grid-item">
<a href="#" class="hoverItem">
<div class="details">
<div class="title">Portrait VII</div>
<div class="icon-cross icon"></div>
</div>
</a>
<img src="http://www.habib-fadel.com/data/oeuvres_2716d/fiche/62/vign_kaa_1528_4cf8a.jpg">
</div>
CSS
.grid-item {
width:200px;
position:relative;
}
.grid-item:hover a{
transform: scale(1);
}
.grid-item img {
width:100%;
}
.grid-item a {
display:block;
background-color:red;
top:0px;
position:absolute;
width:200px;
height:100%;
transform: scale(0);
transition:0.2s linear all;
}
.grid-item .title {
text-align: center;
width: 100%;
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
http://jsfiddle.net/ort52qzd/2/