body{ background-image: url("http://ailievski.com/wp-content/uploads/2014/11/bp_background_2_blue1.jpg"); background-attachment: fixed; background-size: cover; padding:5% 0; } h1{ color:#fff; font-size:35px; text-align: center; text-transform: capitalize; } .service_box{ margin:20px 0; padding:40px 20px; text-align: center; border-radius:5px; background:rgba(59, 63, 66,0.7); transition: all 0.30s ease 0s; } .service_box:hover{ background:#00BFF3; } .service_box .service_icon{ width:70px; height:70px; margin: 0 auto; font-size:35px; background: #fff; line-height:70px; border-radius:50px; transform: translateY(0); transition: all 0.30s ease 0s; } .service_box:hover .service_icon{ transform: translateY(-100%); } .service_box .service_icon i{ color:#333; } .service_box h3{ position: relative; top:40px; margin:0; color:#fff; font-size:23px; text-transform:uppercase; transform: translateY(0%); transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s; } .service_box:hover h3{ top:-40px; } .service_box p{ color:#fff; margin:0; opacity:0; transition: all 0.30s linear 0s; } .service_box:hover p{ opacity:1; }