<div class="services">
		<div class="card graphic-design">
			<div class="service-bg">
				<i class="fa fa-pencil"></i>
				
				<div class="service-description">
					<h4>Graphic Design</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
				</div>
			</div>
		</div> <!-- End of card -->

		<div class="card web-design">
			<div class="service-bg">
				<i class="fa fa-globe"></i>
				<div class="service-description">
					<h4>Web Design</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
				</div>
			</div>
		</div> <!-- End of card -->

		<div class="card seo">
			<div class="service-bg">
				<i class="fa fa-search"></i>
				<div class="service-description">
					<h4>SEO</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
				</div>
			</div>
		</div> <!-- End of card -->


	</div>

html, body, h1, h2, h3, h4, h5, h6, img, p { margin: 0; padding: 0; }
html { font:16px Arial; }
.services { width: 900px;margin: 0 auto; }
.card { width: 300px; height: 400px; float: left;margin-top: 60px;position: relative;
 -webkit-perspective: 500; perspective: 500;}
.service-bg { background: radial-gradient(circle, #6d6550, #49453a); width: 300px; height: 400px; text-align: center; padding: 20px; box-sizing: border-box; transform: rotateY(0deg); -moz-transform: rotateY(0deg); -webkit-transform: rotateY(30deg); -webkit-transition: transform 0.5s ease;  }
.card:hover .service-bg { -webkit-transform: rotateY(0deg);  }
.service-bg i { font-size: 8em; color: #f2b01e; }
.service-description { background-color: #f0ede7; color:#8b7d5e; font-size: 20px; width:190px; padding: 20px; position: absolute; top:170px; left: 35px; box-shadow: 0px 0px 10px #000; -webkit-transform: rotateY(30deg) translateZ(60px); -webkit-transition: transform 0.5s ease; transition: transform 0.5s ease; }
.card:hover .service-description { -webkit-transform: rotateY(0deg) translateZ(0px); transform: rotateY(360deg); }
.service-description h4 { color:#f2b01e; font-size: 24px; text-align: center; margin-bottom: 10px; }