"Colorful Columns"
Bootstrap 3.3.0 Snippet by ktnthkkr

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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"> <div class="row col-container text-center"> <div class="col custom_card" style="background-color: rgba(17, 62, 95, 1);"> <div class="first_body"> <p>Programa Europeu de consolidação de armazéns para redução de custos e optimização dos níveis de serviço pela metodologia 6Sigma.<br><br><br></p> <h6>FG Warehouse</h6> </div> <div class="second_body"> <p style="color:#9A9FA5!important">"She is highly energetic and in depth person when it comes to execution and knowledge about the subject She is a ... expert in logistics and supply chain She has been leading the innovation and continuous improvement initiative across Europe for the logistics and supply chain function and she did a terrific job". <br><br>P. Agarwal<br>Former Global Director</p> <h6>Delphi Packard</h6> </div> </div> <div class="col custom_card" style="background-color:#87c1c7"> <div class="first_body"> <p>Programa estratégico de aumento da satisfação do cliente com recurso ao método Hoshin Kanri para alinhamento e mobilização das chefias e foco na execução.</p> <h6>Win With Customers</h6> </div> <div class="second_body"> <p>"She is a great colleague but moreover a great coach, mentor and necessary executor."</p> <p>W. Powlowski<br>Area Gen. Manager</p> <h6>Johnson Controls</h6> </div> </div> <div class="col custom_card" style="background-color:#f47f2d"> <div class="first_body"> <p>Projectos de melhoria de OEE (Overall Equipement Efficiency) em linhas de produção com aplicação dos conceitos de Lean Manufacturing.</p> <h6>Global Efficiency</h6> </div> <div class="second_body"> <p>"I ... hired Claudia to work on the deep root analysis of the overall performance and improve the cohesion of the team." It has a unique combination of intelligence, acumen and energy that drives everyone to core issues and finds practical solutions while engaging everyone for higher purposes.<br><br>J. Pepper<br>Ex-Director Operations</p> <h6>Dancoke</h6> </div> </div> </div> </div>
@font-face { font-family: wf_4ad048fa29e74054a9c783f58; src: url("https://static.wixstatic.com/ufonts/ac5846_4ad048fa29e74054a9c783f588260ceb/woff/file.woff") format("woff"), url("https://static.wixstatic.com/ufonts/ac5846_4ad048fa29e74054a9c783f588260ceb/woff2/file.woff2") format("woff2"), url("https://static.wixstatic.com/ufonts/ac5846_4ad048fa29e74054a9c783f588260ceb/ttf/file.ttf") format("ttf"); } @font-face{ font-family:"Brandon-Grot-W01-Light"; src:url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/e00ba30a-0bf3-4c76-9392-8641fa237a92.eot?#iefix"); src:url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/e00ba30a-0bf3-4c76-9392-8641fa237a92.eot?#iefix") format("eot"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/69b40392-453a-438a-a121-a49e5fbc9213.woff2") format("woff2"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/9362bca5-b362-4543-a051-2129e2def911.woff") format("woff"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/85060878-ca6c-43cc-ac31-7edccfdca71b.ttf") format("truetype"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/47f089a6-c8ce-46fa-b98f-03b8c0619d8a.svg#47f089a6-c8ce-46fa-b98f-03b8c0619d8a") format("svg"); } .custom_card{ padding:5px; } .first_body > p{ font: normal normal normal 20px/1.5em brandon-grot-w01-light,sans-serif; font-size:20px; padding:50px; line-height:1.5em; text-align:center; color:#FFFFFF; font-family:futura-lt-w01-light,sans-serif; } .first_body > h6{ text-align: center; font-family: wfont_ac5846_4ad048fa29e74054a9c783f588260ceb,wf_4ad048fa29e74054a9c783f58,orig_byom; letter-spacing: 0.25em; color: #ffffff; font-size: 18px; } .second_body > h6{ text-align: center; font-family: wfont_ac5846_4ad048fa29e74054a9c783f588260ceb,wf_4ad048fa29e74054a9c783f58,orig_byom; letter-spacing: 0.25em; color: #ffffff; font-size: 18px; } .second_body > p { font: normal normal normal 16px/1.55em brandon-grot-w01-light,sans-serif; color:#113E5F; padding-top:50px; padding-bottom:50px; padding-left:15px; padding-right:15px; } .col-container { display: table; /* Make the container element behave like a table */ width: 100%; /* Set full-width to expand the whole page */ } .col { display: table-cell; /* Make elements inside the container behave like table cells */ width: 33.33%; border-style: solid; border-color: white; border-width: 10px; }
$(".second_body").attr("style","display:none"); $(".custom_card").hover( function () { $(this).find(".second_body").attr("style","display:block"); $(this).find(".first_body").attr("style","display:none"); }, function () { $(this).find(".second_body").attr("style","display:none"); $(this).find(".first_body").attr("style","display:block"); } );

Related: See More


Questions / Comments: