Bootstrap Snippet Image with Left Arrow using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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="container">
    <div class="row">
        
        
        <div class="col-md-12">
            <div class="img-with-arrow">
                <img src="https://image.freepik.com/free-photo/nature-design-with-bokeh-effect_1048-1882.jpg" alt="IMG" class="center-block img-responsive" />
            </div>
        </div>
        
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.img-with-arrow img{
    width:100%;
}
.img-with-arrow{
    position:relative;
    width:960px;
    height:auto;
}
.img-with-arrow:after{
    position:absolute;
    content:'';
    display: inline-block;
    width:0;
    height:0;
    border:80px solid transparent;
    vertical-align: middle;
    margin:auto 0;
    top:0;
    bottom:0;right:0;
    border-right-color: #fff;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Image with Left Arrow"
Bootstrap 3.3.0 Snippet by msaevan

Related: See More

Questions / Comments:

"Image with Left Arrow" Bootstrap 3.3.0 Snippet by msaevan

Related: See More

Questions / Comments:

"Image with Left Arrow"
Bootstrap 3.3.0 Snippet by msaevan