You can do this using CSS transition and opacity :
Also, you cannot use an id twice in your markup. Ids must be unique, you should be using class for portfolio-item
and you forgot the closing tag for #portfolio-grid
HTML:
<div id="portfolio-grid">
<div id="portfolio-column">
<div class="portfolio-item">
<img src="http://lorempixel.com/output/people-h-g-353-550-4.jpg" alt="Portfolio Item 1" />
<div class="content">your text here</div>
</div>
<div class="portfolio-item">
<img src="http://lorempixel.com/output/fashion-h-g-353-550-1.jpg" alt="Portfolio Item 2" />
<div class="content">your text here</div>
</div>
</div>
</div>
CSS:
#portfolio-grid {
height: 1043px;
margin-left: 19px;
margin-bottom: 55px;
float:left;
}
#portfolio-column {
width: 276px;
margin-right: 19px;
float:left;
}
.portfolio-item {
width: 276px;
margin-bottom: 15px;
float:left;
position:relative;
}
.portfolio-item img {
display:block;
width: 276px;
height:auto;
}
.content {
position:absolute;
top:0;
left;
0;
width:100%;
height:100%;
background:#E74C3C;
opacity:0;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
.portfolio-item:hover .content {
opacity:1;
}