<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="row row1 margintop-50 marginbot-50"> <h5 class="text-center">4 - Step circle</h5> <div class="col-md-4"> <div class="col-md-12"> <ul class="framemodel_box frame1"> <p class="themecolor text-center" >1 </p> <li>list1</li> <li>list2</li> </ul> </div> <div class="col-md-12" style=" margin-top: 0px;"> <ul class="framemodel_box frame3"> <p class="themecolor text-center">2</p> <li>;-)</li> <li>list2</li> <li>list3</li> <li>list4</li> </ul> </div> </div> <div class="col-md-4"> <!-- <div style=" margin: 3px 0 0 -36px;"> --> <!-- <img src="img/offerings/framework1.png" width=" 410px"> --> <!-- </div> --> <div style=" margin: 3px 0 0 -30px;"> <div id="circle"> <p class="icon"></p> <a href="#" class="chover fdw_left item" framenum="1"><span class="circle_heading-top1">one</span></a> <a href="#" class="chover fdw_right" framenum="2"><span class="circle_heading-top2">three</span></a> <a href="#" class="chover fdw_left1" framenum="3"><span class="circle_heading-bot1">two</span></a> <a href="#" class="chover fdw_right1" framenum="4"><span class="circle_heading-bot2">four</span></a> </div> </div> </div> <div class="col-md-4"> <div class="col-md-12"> <ul class="framemodel_box frame2"> <p class="themecolor text-center">3 </p> <li>list1</li> <li>list2</li> </ul> </div> <div class="col-md-12" style="margin-top: 0px;"> <ul class="framemodel_box frame4"> <p class="themecolor text-center">4 </p> <li>list1</li> <li>list2</li> <li>list3</li> <li>list4</li> </ul> </div> </div> </div>

#circle { position:relative; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; border:1px solid #000; width:400px; height:400px; overflow:hidden; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease; } .fdw_left, .fdw_right { float:left; width:50%; height:50%; margin:0; text-align:center; /* line-height:280px; */ text-decoration:none; } .fdw_left1, .fdw_right1 { float:left; width:50%; height:50%; margin:0; text-align:center; /* line-height:280px; */ text-decoration:none; } .fdw_right { border-radius:0 0 0 0; -moz-border-radius:0 142px 142px 0; -webkit-border-radius:0 0 0 0; } .fdw_right1{ border-radius:0 0 0 0; -moz-border-radius:0 142px 142px 0; -webkit-border-radius:0 0 0 0; } .fdw_left { background-color:grey; border-radius:0 0 0 0; -moz-border-radius:142px 0 0 142px; -webkit-border-radius:0 0 0 0; color:#1e2a2a; /* text-indent:-30px; */ } .fdw_left1 { background-color:#727972; border-radius:0 0 0 0; -moz-border-radius:142px 0 0 142px; -webkit-border-radius:0 0 0 0; color:#1e2a2a; /* text-indent:-30px; */ } .fdw_right { background-color:#727972; color:#FFFFFF; /* text-indent:35px; */ } .fdw_right1 { background-color:grey; color:#FFFFFF; /* text-indent:35px; */ } #circle { border:10px solid rgb(221, 237, 252); } #circle .icon { width:71px; height:77px; position:absolute; top:50%; left:50%; margin:-39px auto 0 -35px; background: url(../img/icon_cycle.png) top center no-repeat; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } #circle a { font-weight:700; font-family: 'Open Sans Condensed','Arial Narrow', Arial, sans-serif; text-decoration:none; text-transform:uppercase; font-size:20px; -webkit-transition: background-color .3s; -moz-transition: background-color .3s; -o-transition: background-color .3s; -ms-transition: background-color .3s; transition: background-color .3s; } #circle a:hover { /* background-color:#00b68f; */ background-color:#2C93F2; color:#FFF; } #circle:hover { border:10px solid rgba(214,200,255,.5); } #circle:hover .icon { transform: rotate(180deg); -ms-transform: rotate(180deg); /* IE 9 */ -webkit-transform: rotate(180deg); /* Safari and Chrome */ -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .circle_heading-top1{ position: relative; top: 90px; font-size:16px; color:#fff; } .circle_heading-top2{ position: relative; top: 110px; font-size:16px; right: 8px; } .circle_heading-bot1{ position: relative; top: 44px; font-size:16px; color:#fff; } .circle_heading-bot2{ position: relative; top: 56px; right:14px; font-size:16px; }

$(function(){ $(".framemodel_box").css('visibility','hidden'); var fid; $('.chover').hover(function(){ fid=$(this).attr('framenum'); $(".frame"+fid).css('visibility','visible'); ; }, function(){ $(".frame"+fid).css('visibility','hidden'); ; }); });