Bootstrap Snippet Bootstrap 4 Caption Hover Effect 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
<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 ---------->
<div class="container">
    <div class="row">
        <div class="one-third col-md-4"> <a href="#" class="img-caption">
                <figure> <img src="https://i.imgur.com/K7A78We.jpg" alt="" />
                    <figcaption>
                        <h3>MY First Caption</h3> <span>For what reason would it be advisable for me to think about business content?</span>
                    </figcaption>
                </figure>
            </a> </div>
        <div class="one-third col-md-4"> <a href="#" class="img-caption">
                <figure> <img src="https://i.imgur.com/c8952Iz.jpg" alt="" />
                    <figcaption>
                        <h3>MY Second Caption</h3> <span>For what reason would it be advisable for me to think about business content?</span>
                    </figcaption>
                </figure>
            </a> </div>
        <div class="one-third col-md-4"> <a href="#" class="img-caption">
                <figure> <img src="https://i.imgur.com/K7A78We.jpg" alt="" />
                    <figcaption>
                        <h3>MY Third Caption</h3> <span>For what reason would it be advisable for me to think about business content?</span>
                    </figcaption>
                </figure>
            </a> </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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
    background-color: #eee
}
.container {
    margin-top: 100px
}
a.img-caption {
    margin: 0 0 40px;
    display: block
}
.img-caption img {
    position: relative;
    height: 300px
}
.img-caption figure {
    box-sizing: content-box;
    overflow: hidden;
    position: relative
}
.img-caption figcaption {
    background: rgba(0, 0, 0, .4);
    position: absolute;
    box-sizing: content-box;
    padding: 17px 25px;
    bottom: 0;
    display: block;
    width: 100%;
    -webkit-transition: background-color .2s ease-in-out;
    -moz-transition: background-color .2s ease-in-out;
    -ms-transition: background-color .2s ease-in-out;
    -o-transition: background-color .2s ease-in-out;
    transition: background-color .2s ease-in-out
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap 4 Caption Hover Effect"
Bootstrap 4.1.1 Snippet by tieusuquay79

Related: See More

Questions / Comments:

"Bootstrap 4 Caption Hover Effect" Bootstrap 4.1.1 Snippet by tieusuquay79

Related: See More

Questions / Comments:

"Bootstrap 4 Caption Hover Effect"
Bootstrap 4.1.1 Snippet by tieusuquay79