<section class="service">
<div class="services-box">
<div class="box">
<h2>01</h2>
<h3>Service One</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aspernatur ut, voluptas dignissimos! Dignissimos tenetur, sunt quasi necessitatibus labore nemo possimus eos est fuga tempore corporis, culpa ipsam magni quibusdam.</p>
</div>
<div class="box">
<h2>02</h2>
<h3>Service Two</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aspernatur ut, voluptas dignissimos! Dignissimos tenetur, sunt quasi necessitatibus labore nemo possimus eos est fuga tempore corporis, culpa ipsam magni quibusdam.</p>
</div>
<div class="box">
<h2>03</h2>
<h3>Service Three</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aspernatur ut, voluptas dignissimos! Dignissimos tenetur, sunt quasi necessitatibus labore nemo possimus eos est fuga tempore corporis, culpa ipsam magni quibusdam.</p>
</div>
</div>
</section>
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500&display=swap" rel="stylesheet">
<style>
body { margin: 0; padding: 0;}
.service { font-family: 'Poppins', sans-serif; display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(#6A1B9A, #9C27B0 50%, #fff 50%, #fff); }
.services-box { width: 1100px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex;
display: flex; justify-content: space-between; flex-wrap: wrap;}
.services-box .box { position: relative; width: 280px; background: #fff; padding: 60px 40px 60px; box-shadow: 0px 15px 45px rgba(0,0,0,.1);}
.services-box .box:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ff226d; transform: scaleY(0); transform-origin: top; transition: transform 0.5s; }
.services-box .box:hover:before { transform: scaleY(1); transform-origin: bottom; transition: transform 0.5s;}
.services-box .box h2 { position: absolute; left: 40px; top: -10px; font-size: 4em; font-weight: 800; z-index: 1; opacity: 0.2; transition: 0.5s;}
.services-box .box:hover h2 { opacity: 1; color: #fff; transform: translateY(-50px);}
.services-box .box h3 { position: relative; z-index: 99; font-size: 28px; color: #333; transition: 0.5s;}
.services-box .box p { position: relative; color: #555; transition: 0.5s; z-index: 99;}
.services-box .box:hover h3, .services-box .box:hover p { color: #fff;}
</style>