<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container padding6em">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4 big_team_grid big_team_gridf">
<div class="big_text text1-big">
<h3>01</h3>
<h5>NEW CLASSROOM TECHNOLOGY</h5>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 big_team_grid big_team_gridf">
<div class="big_text text1-big">
<h3>01</h3>
<h5>NEW CLASSROOM TECHNOLOGY</h5>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 big_team_grid big_team_gridf">
<div class="big_text text1-big">
<h3>01</h3>
<h5>NEW CLASSROOM TECHNOLOGY</h5>
</div>
</div>
</div>
</div>
.padding6em {
background: #333;
padding: 6em;
}
.big_text {
background: #fff;
border: 1px solid #e0e0e0;
padding: 3em 4em;
position: relative;
overflow: hidden;
z-index: 9;
box-shadow: 10px -10px 3px 3px rgba(0, 0, 0, 0.25);
}
.big_text h3 {
font-size: 2em;
color: #FCB941;
margin-bottom: .5em;
}
.big_text h5 {
font-size: 1.5em;
color: #000;
line-height: 1.8;
}
.big_text:before {
content: '';
background: #00b5b5;
background: linear-gradient(to right, rgba(0, 128, 0, 0.7),rgba(0, 0, 255, 0.6),rgba(75, 0, 130, 0.6),rgba(238, 130, 238, 0.6),rgba(255, 0, 0, 0.6),rgba(255, 165, 0, 0.6),rgba(255, 255, 0, 0.6));
position: absolute;
width: 100%;
height: 2%;
left: 0;
bottom: 0;
z-index: -1;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
transition: 0.5s all;
background: -moz-linear-gradient(to right, rgba(0, 128, 0, 0.7),rgba(0, 0, 255, 0.6),rgba(75, 0, 130, 0.6),rgba(238, 130, 238, 0.6),rgba(255, 0, 0, 0.6),rgba(255, 165, 0, 0.6),rgba(255, 255, 0, 0.6));
background: -webkit-gradient(to right, rgba(0, 128, 0, 0.7),rgba(0, 0, 255, 0.6),rgba(75, 0, 130, 0.6),rgba(238, 130, 238, 0.6),rgba(255, 0, 0, 0.6),rgba(255, 165, 0, 0.6),rgba(255, 255, 0, 0.6));
background: -webkit-linear-gradient(to right, rgba(0, 128, 0, 0.7),rgba(0, 0, 255, 0.6),rgba(75, 0, 130, 0.6),rgba(238, 130, 238, 0.6),rgba(255, 0, 0, 0.6),rgba(255, 165, 0, 0.6),rgba(255, 255, 0, 0.6));
background: -o-linear-gradient(to right, rgba(0, 128, 0, 0.7),rgba(0, 0, 255, 0.6),rgba(75, 0, 130, 0.6),rgba(238, 130, 238, 0.6),rgba(255, 0, 0, 0.6),rgba(255, 165, 0, 0.6),rgba(255, 255, 0, 0.6));
background: -ms-linear-gradient(to right, rgba(0, 128, 0, 0.7),rgba(0, 0, 255, 0.6),rgba(75, 0, 130, 0.6),rgba(238, 130, 238, 0.6),rgba(255, 0, 0, 0.6),rgba(255, 165, 0, 0.6),rgba(255, 255, 0, 0.6));
}
.big_team_grid {
padding: 0 .8em;
}
.big_team_grid:hover .big_text:before {
height: 100%;
}
