<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.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"> <div class="row"> <div class="title_row"> <h2>The Working Process</h2> <h5>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believabl</h5> </div> </div> </div> </section> <section class="successive_process"> <div class="container-fluid successive_process_inner" style="background-image:url(images/successive.png);"> <div class="row"> <div class="container p-0"> <div class="process float-left"> <div class="dot_circle"> <div class="icon_circle"> <img src="images/search.png" width="58" height="58" alt=""/> <div class="hover_texts">Smart Ideas Steady Growth</div> </div> </div> <h4 class="text-center">Research</h4> </div> <div class="process float-left"> <div class="dot_circle"> <div class="icon_circle"> <img src="images/search.png" width="58" height="58" alt=""/> <div class="hover_texts">Smart Ideas Steady Growth</div> </div> </div> <h4 class="text-center">Sketch</h4> </div> <div class="process float-left"> <div class="dot_circle"> <div class="icon_circle"> <img src="images/search.png" width="58" height="58" alt=""/> <div class="hover_texts">Smart Ideas Steady Growth</div> </div> </div> <h4 class="text-center">Design</h4> </div> <div class="process float-left"> <div class="dot_circle"> <div class="icon_circle"> <img src="images/search.png" width="58" height="58" alt=""/> <div class="hover_texts">Smart Ideas Steady Growth</div> </div> </div> <h4 class="text-center">Development</h4> </div> <div class="process float-left"> <div class="dot_circle"> <div class="icon_circle"> <img src="images/search.png" width="58" height="58" alt=""/> <div class="hover_texts">Smart Ideas Steady Growth</div> </div> </div> <h4 class="text-center">Launch</h4> </div> </div> </div> </div> </section>

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600'); body { margin: 0; font-family: 'Open Sans', sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; color: rgba(0,0,0,1.00); text-align: left; } h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', sans-serif; color: rgba(0,0,0,1.00); } .title_row { text-align: center; margin: 0 auto; margin-bottom: 0px; margin-bottom: 60px; } .title_row::after { display: block; content: ''; width: 40px; height: 2px; background: #e99544; margin: 10px auto 0; } .title_row h2 { font-weight: 600; font-size: 28px; color: #232323; line-height: 1; margin: 0 0 10px; } .title_row h5 { font-weight: 400; font-size: 14px; line-height: 24px; margin: 0; color: #777777; letter-spacing: .08rem; } .successive_process .successive_process_inner { background: url(../images/successive.png) no-repeat scroll center 0; background-position: center; background-repeat: no-repeat; padding-top: 50px; margin-bottom: 50px; } .successive_process .successive_process_inner .process:nth-child(5n+1) { clear: both; } .successive_process .successive_process_inner .process { margin-right: 48px; text-align: center; font-size: 13px; line-height: 1; letter-spacing: 0.8px; color: #232323; width: 180px; margin-bottom: 30px; } .successive_process .successive_process_inner .process .dot_circle { background: url(../images/dotted.png) no-repeat scroll 0 0; background-size: auto auto; background-size: cover; padding: 15px; border-radius: 100%; margin-bottom: 28px; width: 180px; height: 180px; transition: all 300ms ease-in-out 0s; } .successive_process .successive_process_inner .process { text-align: center; font-size: 13px; line-height: 1; letter-spacing: 0.8px; color: #232323; } .successive_process .successive_process_inner .process .dot_circle .icon_circle { width: 165px; height: 165px; line-height: 175px; border-radius: 100%; background: #ccdfc8; margin: -6.6px; position: relative; } .successive_process .successive_process_inner .process .dot_circle .icon_circle { line-height: 175px; } .successive_process .successive_process_inner .process .dot_circle .icon_circle img { display: inline-block; transition: all 300ms ease-in-out 0s; } .successive_process .successive_process_inner .process .dot_circle .icon_circle .hover_texts { position: absolute; line-height: 24px; letter-spacing: 0.8px; color: #232323; font-style: italic; text-align: center; width: 100%; height: 100%; top: 0; padding: 60px 10px 0; opacity: 0; transition: all 300ms ease-in-out 0s; } .successive_process .successive_process_inner .process:hover .dot_circle { background-image: url("https://drive.google.com/open?id=10RxtFuuInlWBimUBbJnPb39tPvmQJNgN;") } .successive_process .successive_process_inner .process:hover .dot_circle .icon_circle img { opacity: 0.01; } .successive_process .successive_process_inner .process:hover .dot_circle .icon_circle .hover_texts { opacity: 1; }