Bootstrap Snippet Hover effects 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/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="container">
        <div class="box mr20">
            <div class="title">Medical Square</div>
            <div class="svg">
                <svg id="svg-medical-square" width="180" height="180">
                    <title>Medical Square</title>
                    <g id="svg-medical-square-g-01">
                        <polygon class="cls-1" points="60.22 140.82 31.02 90.24 60.22 39.67 118.62 39.67 147.81 90.24 118.62 140.82 60.22 140.82" />
                        <path class="cls-2" d="M116.62,43.14v94.22L35,90.24l81.59-47.11m2-3.46L31,90.24l87.59,50.57V39.67h0Z" />
                        <path class="cls-2" d="M62.22,43.14l81.59,47.11L62.22,137.35V43.14m-2-3.46V140.82l87.59-50.57L60.22,39.67h0Z" />
                        <line class="cls-1" x1="118.62" y1="39.67" x2="61.12" y2="139.28" />
                        <line class="cls-1" x1="60.22" y1="39.67" x2="118.62" y2="140.82" />
                        <line class="cls-1" x1="31.46" y1="90.83" x2="147.81" y2="90.24" />
                        <circle class="cls-3" cx="146.44" cy="90" r="8" />
                        <circle class="cls-4" cx="31.46" cy="90.49" r="8" />
                        <circle class="cls-3" cx="61.12" cy="39.67" r="8" />
                        <circle class="cls-4" cx="118.62" cy="39.67" r="8" />
                        <circle class="cls-4" cx="118.62" cy="140.82" r="8" />
                        <circle class="cls-3" cx="60.22" cy="140.82" r="8" />
                    </g>
                    <g id="svg-medical-square-g-02">
                        <circle class="cls-5" cx="89.42" cy="90.24" r="28.67" />
                        <path class="cls-6" d="M102.42,98.61L99.51,97v2.48a0.65,0.65,0,0,1,0,.07c2.47,0.38,3.32,3.15,3.37,4.68l-1.4,0c0-.14-0.21-3.46-2.64-3.4s-2.49,3.23-2.48,3.37l-1.4,0c0-1.5.66-4.21,3.19-4.69a0.66,0.66,0,0,1,0-.1V96.3l-4-2.13V91.42a12,12,0,0,0,2.79-4.08,0.71,0.71,0,0,0,.15.08c0.75,0.23,1.75-.84,2.22-2.4s0.25-3-.5-3.23a0.83,0.83,0,0,0-.57.05h0l0,0a5.26,5.26,0,0,0,0-.53c0,0.05,0,.1,0,0.16v0c0-.19,0-0.38,0-0.57,0-6.35-3.71-10.15-8.28-10.15s-8.28,3.8-8.28,10.15c0,0.19,0,.38,0,0.57,0,0,0,0,0,0s0-.1,0-0.15c0,0.17,0,.34,0,0.52l0,0h0a0.83,0.83,0,0,0-.57-0.05c-0.75.23-1,1.68-.5,3.23s1.47,2.63,2.22,2.4A0.71,0.71,0,0,0,83,87.33a12,12,0,0,0,2.79,4.08V94l-1.72,1.08L81,96.78V101a2.1,2.1,0,1,1-1.4,0V97.53l-2,1.08c-3.24,1.8-5.87,3.58-5.87,5.08v2.92a0.92,0.92,0,0,0,.92.92h34.76a0.92,0.92,0,0,0,.92-0.92v-2.92C108.29,102.19,105.66,100.41,102.42,98.61Z" />
                    </g>
                </svg>
            </div>
        </div>
        <div class="box mr20">
            <div class="title">Articles</div>
            <div class="svg">
                <svg id="svg-articles" width="180" height="180" viewBox="0 0 200 200">
                    <defs>
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
* {
    padding: 0;
    margin: 0;
}
body {
    background: #F0ECE7;
}
.mr20 {
  margin-right: 20px;
}
.container {
    overflow: hidden;
    width: 1080px;
    padding: 40px 0;
    margin: 0 auto;
}
.box {
    cursor: pointer;
    display: block;
    float: left;
    width: 200px;
    margin-bottom: 50px;
}
.box .title {
    margin-bottom: 20px;
    font-family: Arial;
    font-size: 20px;
    font-weight: bold;
    line-height: 20px;
    color: #0E1644;
    text-align: center;
}
.box .svg {
    width: 180px;
    height: 180px;
    border-radius: 100%;
    margin: 0 10px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Hover effects"
Bootstrap 4.1.1 Snippet by saikrishna99666

Related: See More

Questions / Comments:

"Hover effects" Bootstrap 4.1.1 Snippet by saikrishna99666

Related: See More

Questions / Comments:

"Hover effects"
Bootstrap 4.1.1 Snippet by saikrishna99666