Bootstrap Snippet image-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
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 ---------->
<section id="instragram">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-3 ">
        <div class="instrgream-image">
          <img src="https://www.askideas.com/media/07/Beautiful-Cute-Baby-Girl-In-Purple-Dress.jpg">
          <div class="overlay">
              <div class="overlay-text">
            <h4>AYUSH THAKUR</h4>
            <p>Himachal pardesh Mandi sarkaghat</p>
            <a>thakurayush511@gmail.com</a>
            </div>
          </div>
          </div>
          
      </div>
      <div class="col-sm-3">
        <div class="instragram-2">
            <img src="https://www.askideas.com/media/07/Beautiful-Cute-Baby-Girl-In-Purple-Dress.jpg">
            <div class="overlay-2">
              <div class="overlay-text-2">
                  <h4>AYUSH THAKUR</h4>
            <p>Himachal pardesh Mandi sarkaghat</p>
            <a>thakurayush511@gmail.com</a>
              </div>
            </div>
        </div>
      </div>
      <div class="col-sm-3">
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
/**====================================instreagram===========================================**/
    .instrgream-image img ,.instragram-2 img, .instragram-3 img, .instragram-4 img{
        width: 100%;
    }
    #instragram .col-md-3 {
        padding: 0;
    }
    .instrgream-image {
        position: relative;
        display: block;
        overflow: hidden;
    }
    .overlay {
        position: absolute;
        top: 100%;
        background: rgba(0,0,0,0.8);
        width: 100%;
        opacity: 0;
        height: 100%;
        transition: all ease-in-out 0.5s;
        display: block;
        overflow: hidden;
        transition: all ease-in 0.8s;
    }
    .overlay-text {
        position: absolute;
        top: 32%;
        transform: translatex(5%);
    }
    .overlay-text h4, .overlay-text-2 h4, .overlay-text-3 h4, .overlay-text-4 h4 {
        color: #9E2499;
        font-size: 31px;
        margin-bottom: 18px;
    }
    .overlay-text p, .overlay-text-2 p, .overlay-text-3 p, .overlay-text-4 p   {
        color: #787878;
        font-size: 16px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"image-hover-effect"
Bootstrap 4.1.1 Snippet by ishu511

Related: See More

Questions / Comments:

"image-hover-effect" Bootstrap 4.1.1 Snippet by ishu511

Related: See More

Questions / Comments:

"image-hover-effect"
Bootstrap 4.1.1 Snippet by ishu511