"3 boxes hover effect"
Bootstrap 3.0.0 Snippet by jeevan123456

<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%; }

Related: See More


Questions / Comments: