/*===== general css =====*/ .xoverlay{ position:relative; overflow:hidden; perspective: 300px; -webkit-perspective: 300px; -ms-perspective: 300px; -o-perspective: 300px; } .xoverlay .x-img-main{ width:100%; } .xoverlay-data{ width:100%; height:100%; text-align:center; } .xoverlay-data p{ text-align:left; padding:20px; margin:0; float:left; } .xoverlay-data div{ margin-left:20px;} .hw { height:280px !important; width:100% !important; line-height:280px; display:table; text-align:center;} .hw p { display: table-cell; vertical-align:middle;}

/*===== Slide Up =====*/ .x-bottom .xoverlay-box{ width:100%; height:100%; position:absolute; left:0; right:0; bottom:-500px; background:#1d1e22; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-bottom:hover .xoverlay-box{ width:100%; height:100%; position:absolute; left:0; right:0; bottom:0; background:#1d1e22; }

/*===== Slide Down =====*/ .x-top .xoverlay-box{ width:100%; height:100%; position:absolute; left:0; right:0; top:-500px; background:#1d1e22; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-top:hover .xoverlay-box{ width:100%; height:280px; position:absolute; left:0; right:0; top:0; background:#1d1e22; }