Bootstrap Snippet social red using HTML CSS Bootstrap

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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<center>
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-sm-6">
                <div class="box">
                    <svg class="curve1" x="0px" y="0px" viewBox="0 0 400 200">
                    <path d="M398.938,143.806c-24.004,26.063-155.373,104.33-224.724,7.328 C69.626,4.846,0.5,71.583,0.5,71.583V1.5h398.629L398.938,143.806z"></path>
                    </svg>
                    <img src="http://mty360.net/wp-content/uploads/2018/03/FB_IMG_1521210160150.jpg" alt="">
                    <div class="box-content">
                        <h3 class="title">guty</h3>
                        <span class="post">fron - end</span>
                        <ul class="icon">
                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                        </ul>
                    </div>
                    <svg class="curve2" x="0px" y="0px" width="150px" height="150px" viewBox="0 0 150 50">
                    <path d="M1.114,7.567C87.544-33.817,150,150.5,150,150.5H1.361L1.114,7.567z"></path>
                    </svg>
                </div>
            </div>     <div class="col-md-4 col-sm-6">
                <div class="box">
                    <svg class="curve1" x="0px" y="0px" viewBox="0 0 400 200">
                    <path d="M398.938,143.806c-24.004,26.063-155.373,104.33-224.724,7.328 C69.626,4.846,0.5,71.583,0.5,71.583V1.5h398.629L398.938,143.806z"></path>
                    </svg>
                    <img src="http://mty360.net/wp-content/uploads/2018/03/FB_IMG_1521210160150.jpg" alt="">
                    <div class="box-content">
                        <h3 class="title">guty</h3>
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
.demo{ background-color: #e7e7e7; }
.box{
    font-family: 'Roboto', sans-serif;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease 0s;
}
.box:hover{ box-shadow: 0 0 20px rgba(0,0,0,0.5); }
.box .curve1{
    opacity: 0;
    position: absolute;
    right: -2px;
    top: -100%;
    z-index: 1;
    transition:all 0.3s ease-in-out;
}
.box:hover .curve1{
    opacity: 1;
    top: -1%;
}
.box path{ fill:rgba(255,255,255,0.8); }
.box img{
    width: 100%;
    height: auto;
    transition: all 0.3s ease 0s;
}
.box:hover img{ filter: blur(2px) grayscale(100%); }
.box .box-content{
    color: #FC427B;
    text-align: right;
    width: 100%;
    height: 100%;
    position: absolute;
    right: 15px;
    top: 15px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"social red"
Bootstrap 4.1.1 Snippet by YONY GUTIERREZ CAMPOS

Related: See More

Questions / Comments:

"social red" Bootstrap 4.1.1 Snippet by YONY GUTIERREZ CAMPOS

Related: See More

Questions / Comments:

"social red"
Bootstrap 4.1.1 Snippet by YONY GUTIERREZ CAMPOS