<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <!-- Font awesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Font Awesome JS --> <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script> <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script> <link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"> <div class="container" style="background-color: #EAF7FF; color: #0C3C60"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 aqui" style="text-align: center"> <div class="sopraporaimg"> <img src="https://image.flaticon.com/icons/svg/1161/1161765.svg" alt="empresa" class="imgpb"> <img src="https://image.flaticon.com/icons/svg/1161/1161724.svg" alt="empresa" class="imgnn"> </div> <h4>É simples! Depois do primeiro contato</h4> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 aqui" style="text-align: center; padding: 0 30px"> <div class="sopraporaimg"> <img src="https://image.flaticon.com/icons/svg/2446/2446410.svg" alt="empresa" class="imgpb"> <img src="https://image.flaticon.com/icons/svg/2446/2446395.svg" alt="empresa" class="imgnn"> </div> <h4>agendamos uma visita até vocês.</h4> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 aqui" style="text-align: center; padding: 0 20px"> <div class="sopraporaimg"> <img src="https://image.flaticon.com/icons/svg/2196/2196158.svg" alt="empresa" class="imgpb"> <img src="https://image.flaticon.com/icons/svg/2196/2196220.svg" alt="empresa" class="imgnn"> </div> <h4>Após coletarmos as informações necessárias</h4> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 aqui" style="text-align: center"> <div class="sopraporaimg"> <img src="https://image.flaticon.com/icons/svg/1358/1358533.svg" alt="empresa" class="imgpb"> <img src="https://image.flaticon.com/icons/svg/1358/1358656.svg" alt="empresa" class="imgnn"> </div> <h4>e realizarmos algumas análises,</h4> </div> </div> </div> <div class="container" style="background-color: #0C3C60; color: white"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 aqui" style="text-align: center"> <div class="sopraporaimg"> <img src="https://image.flaticon.com/icons/svg/1161/1161765.svg" alt="empresa" class="imgpb"> <img src="https://image.flaticon.com/icons/svg/1161/1161724.svg" alt="empresa" class="imgnn"> </div> <h4>É simples! Depois do primeiro contato</h4> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 aqui" style="text-align: center; padding: 0 30px"> <div class="sopraporaimg"> <img src="https://image.flaticon.com/icons/svg/2446/2446410.svg" alt="empresa" class="imgpb"> <img src="https://image.flaticon.com/icons/svg/2446/2446395.svg" alt="empresa" class="imgnn"> </div> <h4>agendamos uma visita até vocês.</h4> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 aqui" style="text-align: center; padding: 0 20px"> <div class="sopraporaimg"> <img src="https://image.flaticon.com/icons/svg/2196/2196158.svg" alt="empresa" class="imgpb"> <img src="https://image.flaticon.com/icons/svg/2196/2196220.svg" alt="empresa" class="imgnn"> </div> <h4>Após coletarmos as informações necessárias</h4> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 aqui" style="text-align: center"> <div class="sopraporaimg"> <img src="https://image.flaticon.com/icons/svg/1358/1358533.svg" alt="empresa" class="imgpb"> <img src="https://image.flaticon.com/icons/svg/1358/1358656.svg" alt="empresa" class="imgnn"> </div> <h4>e realizarmos algumas análises,</h4> </div> </div> </div>

.sopraporaimg { position: relative; height: 65px } .imgnn, .imgpb { width: 64px; position: absolute; top: calc(50% - 32px); left: calc(50% - 32px); transition: .2s all linear; } .imgnn { opacity: 0; } .aqui:hover .imgnn { opacity: 1; width: 66px; height: 66px; left: calc(50% - 33px); top: calc(50% - 33px); } /* .aqui:hover .imgnn { opacity: 0 } */ .aqui { margin-top: 50px; } .BkgCF { padding: 35px 0 70px 0; }