"Slider hover effect bootstrap 4"
Bootstrap 4.1.1 Snippet by shehzadali110

<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 ----------> <section class="offersTab"> <div class="TabsList"> <div class="tabList"> <h5 class="offerHead">UPTO 75% DISCOUNT ON TECHNOLOGY SERVICES </h5> <p class="offerPara"> Technology services include custom and bespoke software development, website and web-platforms, enterprise software solutions, mobile apps including native Android and iOS apps </p> </div> <div class="tabList"> <h5 class="offerHead">UPTO 75% DISCOUNT ON MARKETING SERVICES</h5> <p class="offerPara"> Digital marketing services are focused on growing your business and increasing your profits. They include SEO, SEM, Organic growth, Social Media management, Paid Ads, Content Marketing and anything else you can think of! </p> </div> <div class="tabList"> <h5 class="offerHead">EXPERT CONSULTING</h5> <p class="offerPara"> With in-house experts in key areas, you will have access to consulting for your team in key business areas like strategy, finance, innovation and technology including Big Data, IoT, Blockchain. We audit your business with the aim to scale up. </p> </div> <div class="tabList"> <h5 class="offerHead">WORLD CLASS COACHING</h5> <p class="offerPara"> One-to-one coaching from the award winning Javed Khattak. He is a Fellow of the UK’s Institute of Actuaries, has developed successful businesses, advised £100+ billion worth companies and is quoted by prestigious international publications. </p> </div> <div class="tabList"> <h5 class="offerHead">DATA DRIVEN STRATEGY REVIEW</h5> <p class="offerPara"> Strategy review including developing a data driven methodology focusing on scaling-up and refinement of your offering based on what stage of development your business is at. </p> </div> </div> </section>
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); body { margin: 0; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; text-align: left; padding-top: 100px; background-color: #fff; } .TabsList { display: flex; position: relative; height: 90vh; background-image: url(https://www.startupmount.com/wp-content/uploads/2020/02/offerBg.png); background-position: top center; background-size: 100% 100%; background-repeat: no-repeat; } .tabList { width: 20%; height: 90vh; color: white; display: flex; align-items: center; justify-content: center; padding: 60px; border-right: 1px solid #2e876e; transition: all 0.8s; flex-direction: column; align-items: center; justify-content: center; } .tabList h5 { font-family: "CIRCULARSTD-BOOK"; font-size: 25px; } .tabList:hover { cursor: pointer; background: white; border-top: 8px solid #2ed4a4; border-right: 0; height: 100vh; position: relative; bottom: 10vh; box-shadow: 0px 5px 10px #7e7d7d; } .tabList:hover .offerHead { color: #3b66f6 !important; font-family: "CIRCULARSTD-BLACK"; font-weight: 800; } .offerPara { visibility: hidden; height: 0; } .tabList:hover .offerPara { font-family: "CIRCULARSTD-BOOK"; visibility: visible; font-size: 20px; margin-top: 20px; color: black !important; height: auto; }

Related: See More


Questions / Comments: