<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>list1</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:10px solid rgba(255,255,255,.10);
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'); ;
});
});
