Bootstrap Snippet hover icon using HTML CSS

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="gridcontainer clearfix">
    <div class="grid_3">
        <div class="fmcircle_out">
            <a href="#web">
                <div class="fmcircle_border">
                    <div class="fmcircle_in fmcircle_blue">
                        <span>Web-Design</span><img src="https://dl.dropbox.com/u/65958930/uploads/cssdeck/design.png" alt="" />
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="grid_3">
        <div class="fmcircle_out">
            <a href="#branding">
                <div class="fmcircle_border">
                    <div class="fmcircle_in fmcircle_green">
                        <span>Branding</span><img src="https://dl.dropbox.com/u/65958930/uploads/cssdeck/logo.png" alt="" />
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="grid_3">
        <div class="fmcircle_out">
            <a href="#software">
                <div class="fmcircle_border">
                    <div class="fmcircle_in fmcircle_red">
                        <span>Integration</span><img src="https://dl.dropbox.com/u/65958930/uploads/cssdeck/develop.png" alt="" />
                    </div>
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
body {
    font-size: 13px;
    line-height: 20px;
    background: url('https://dl.dropbox.com/u/65958930/OLR/dust.png') center center;
    text-align: enter;
}
/* -- Circular Work -- */
.gridcontainer {
    width: 720px;
    margin: 30px auto;
}
.grid_3 {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 220px;
}
.grid_9 {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 700px;
}
.fmcircle_out {
    width: 200px;
    height: 200px;
    background: rgba(221,221,221,0.3) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAO0lEQVQYV2NkIAIwElKze/fu/3gVgRS4uroyEjQJZBNWRTATYE7BUISuAKdJ6J6Bm4TNBBTr8CkAKQQA02QXOj4w/E8AAAAASUVORK5CYII=);
    text-align: center;
    display: block;
    margin-left: 10px;
    opacity: 0.5;   
    
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"hover icon"
Bootstrap 3.3.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"hover icon" Bootstrap 3.3.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"hover icon"
Bootstrap 3.3.0 Snippet by evarevirus