<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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"> <div class="col-md-12"> <div class="panel panel-default panel_for_hover_div"> <div class="panel-heading panel_for_hover_div_heading"> <ul class="nav nav-tabs panel_for_hover_tabs"> <li class="active"><a href="#tab1default" data-toggle="tab">Apoio aos programas</a></li> <li><a href="#tab2default" data-toggle="tab">Apoio aos agentes de mudança</a></li> <li><a href="#tab3default" data-toggle="tab">Breves lições</a></li> </ul> </div> <div class="panel-body"> <div class="tab-content"> <div class="tab-pane fade in active" id="tab1default"> <div class="row row_for_hover"> <div class="col-xs-6 img-col_for_hover"> <img src="https://static.wixstatic.com/media/ac5846_54f9c9fba2814ad6bd8e1de9a9177df9~mv2.jpg" alt="Avatar" class="image img-responsive"> <div class="overlay"> <div class="text_for_hover">Assessoria no desenho e implementação de um programa de Melhoria Contínua impactante e sustentável<br><a href='#'>Saiba mais</a></div> </div> </div> <div class="col-xs-6 txt-col_for_hover"> <div class='txt-col_for_hover_body'> Assessoria </div> <div class='txt-col_for_hover_body'> 45 min | Consulta </div> <div class='txt-col_for_hover_body'> <a href='#' class='btn btn-primary txt-btn'>Agendar</a> </div> </div> </div> </div> <div class="tab-pane fade" id="tab2default"> <div class="row row_for_hover"> <div class="col-xs-6 img-col_for_hover"> <img src="https://static.wixstatic.com/media/ac5846_bac13dc5b1a44d168a73a4f2414f0f19~mv2.png" alt="Avatar" class="image img-responsive"> <div class="overlay"> <div class="text_for_hover">Estamos disponíveis para orientá-lo no seu percurso profissional.<br><a href='#'>Saiba mais</a></div> </div> </div> <div class="col-xs-6 txt-col_for_hover"> <div class='txt-col_for_hover_body'> Coaching </div> <div class='txt-col_for_hover_body'> 45 min | Consulta </div> <div class='txt-col_for_hover_body'> <a href='#' class='btn btn-primary txt-btn'>Agendar</a> </div> </div> </div> </div> <div class="tab-pane fade" id="tab3default"> <div class="row row_for_hover"> <div class="col-xs-6 img-col_for_hover"> <img src="https://static.wixstatic.com/media/ac5846_6c10fec12a0d484fa67761ead4f08294~mv2.jpg" alt="Avatar" class="image img-responsive"> <div class="overlay"> <div class="text_for_hover">Acreditamos na partilha do conhecimento entre profissionais de Melhoria Contínua.<br>Saiba mais</div> </div> </div> <div class="col-xs-6 txt-col_for_hover"> <div class='txt-col_for_hover_body'> Sessões de partilha </div> <div class='txt-col_for_hover_body'> 30 min | Presencial pago </div> <div class='txt-col_for_hover_body'> <a href='#' class='btn btn-primary txt-btn'>Agendar</a> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>

.panel-default .panel-heading{ background-color:white; } .panel-default{ border:0px; } .nav-tabs li{ border:0px; } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: white; } .row_for_hover:hover .overlay { opacity: 1; } .text_for_hover { color: gray; font-size: 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } .row_for_hover{ border: 1px solid #D8D8D8; text-align:center; } .img-col_for_hover { padding: 0px; } .txt-col_for_hover{ padding:50px; } .txt-col_for_hover_body{ color: #70B2B9; margin-bottom: 13px; font-size: 16px; } .txt-btn{ color: #FFFFFF; background-color: #397F83; border: 1px solid#397F83; border-radius: 0; padding: 6px 20px; font-size: 16px; line-height: 24px; } .panel_for_hover_div>.panel_for_hover_div_heading, .panel_for_hover_tabs, .panel_for_hover_tabs>li.active>a, .panel_for_hover_tabs>li>a:hover, .panel_for_hover_tabs>li>a.active:hover,.panel_for_hover_tabs>li>a.active:focus, .panel_for_hover_tabs>li>a:focus{ border:0px; }