Hover after effects

by panchroma

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;
}