"Circle on hover show div"
Bootstrap 3.3.0 Snippet by vivekbisht109

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="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;">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#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 {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(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'); ;
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: