Edit in JSFiddle

<div style="float: left;">
        <div style="float: left;">
            <div class="item itemCss">
                <a href="javascript:void(0)">
                    <div class="item-billboard item-billboard-css">
                        <img src="http://placehold.it/220x140/104E8B/CAE1FF&text=google">
                        <h3>
                            Google Extension Effect</h3>
                    </div>
                    <div class="item-detail">
                        <p>
                            Google Extension Effect with CSS</p>
                    </div>
                </a>
            </div>
            <div class="item itemCss">
                <a href="javascript:void(0)">
                    <div class="item-billboard item-billboard-css">
                        <img src="http://placehold.it/220x140/8B3626/FF7256&text=extension">
                        <h3>
                            Google Extension Effect</h3>
                    </div>
                    <div class="item-detail">
                        <p>
                            The Base HTML and CSS</p>
                    </div>
                </a>
            </div>
        </div>
        <div style="float: left;">
            <div class="item itemCss">
                <a href="javascript:void(0)">
                    <div class="item-billboard item-billboard-css">
                        <img src="http://placehold.it/220x140/00868B/98F5FF&text=effect">
                        <h3>
                            Google Extension Effect</h3>
                    </div>
                    <div class="item-detail">
                        <p>
                            The CSS-Only Method</p>
                    </div>
                </a>
            </div>
            <div class="item itemCss">
                <a href="javascript:void(0)">
                    <div class="item-billboard item-billboard-css">
                        <img src="http://placehold.it/220x140/698B69/C1FFC1&text=with css">
                        <h3>
                            Google Extension Effect</h3>
                    </div>
                    <div class="item-detail">
                        <p>
                            Browser-powered CSS animations give us the ability to animate.</p>
                    </div>
                </a>
            </div>
            </div>
    </div>

.item{position:relative;width:240px;overflow:hidden;border:1px solid #ccc;height:200px;margin:10px}
.item-billboard-css{-webkit-transition-property:margin-top;-webkit-transition-duration:.5s;-moz-transition-property:margin-top;-moz-transition-duration:.5s;-o-transition-property:margin-top;-o-transition-duration:.5s;-ms-transition-property:margin-top;-ms-transition-duration:.5s}
.itemCss:hover .item-billboard{margin-top:-200px}
.item a{text-decoration:none;color:#000}
.item-billboard,.item-detail{height:180px;padding:10px}
.item-billboard{margin-top:0;background:#fff}
.item-billboard h3{font-size:13px;font-weight:700;color:#262626;font-family:'Open Sans',arial,sans-serif}
.item-detail{background:#ececec}