Bootstrap Snippet Text On Image Hover 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/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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
      <section>
      <div class="container-fluid">
          <div class="container">
          
              <div class="row">
              <div class="col-sm-4">
                  <div class="box">
                  <div class="imgbox">
                      <img src="https://place-hold.it/400x500" class="img-responsive">
                      </div>
                      <div class="content">
                      <h3>Hardik Trivedi</h3>
                          <p>Please Like press like button and post your comment below</p>
                          <a href="javascript void(0)" class="btn btn-default btnD">Read More</a>
                      </div>
                  </div>
                  </div>
                  
                   <div class="col-sm-4">
                  <div class="box">
                  <div class="imgbox">
                      <img src="https://place-hold.it/400x500" class="img-responsive">
                      </div>
                      <div class="content">
                      <h3>Hardik Trivedi</h3>
                          <p>Please Like press like button and post your comment below</p>
                          <a href="javascript void(0)" class="btn btn-default btnD">Read More</a>
                      </div>
                  </div>
                  </div>
                  
                   <div class="col-sm-4">
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
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
body
{
    margin: 0;
    padding: 0;
    font-family: 'Roboto Condensed', sans-serif;
}
section
{
    padding: 120px 0 0;
    
}
.box
{
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    border-radius: 10px;
    background: #000;
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    transition: .5s;
    margin-bottom: 35px;
}
.box:hover
{
    transform: translateY(-30px);
    box-shadow: 0 50px 50x rgba(0,0,0,.5);
}
.box .imgbox
{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Text On Image Hover"
Bootstrap 3.3.0 Snippet by hardiktrivedi

Related: See More

Questions / Comments:

"Text On Image Hover" Bootstrap 3.3.0 Snippet by hardiktrivedi

Related: See More

Questions / Comments:

"Text On Image Hover"
Bootstrap 3.3.0 Snippet by hardiktrivedi