Bootstrap Snippet team ceative effect using HTML CSS

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 ---------->
<div class="container-fluid row" style="padding: 0;margin: 0;">
        <ul class="list_mng">
          <li>
            <div class="mng_hover">
              <p>Start Bootstrap can help you build better websites using the Bootstrap</p>
              <div>
                <span> <i class="fas fa-phone fa-3x mb-3 sr-contact-1"></i></span>
                <span> <i class="fas fa-phone fa-3x mb-3 sr-contact-1"></i></span>
                <span> <i class="fas fa-phone fa-3x mb-3 sr-contact-1"></i></span>
                <span> <i class="fas fa-phone fa-3x mb-3 sr-contact-1"></i></span>
              </div>
            </div>
            <div class="mng_block">
              <a href="" class="mng_link">
                <img class="img-fluid" src="https://bootstrapmade.com/demo/themes/eStartup/img/team/1.jpg" alt="">
              </a>
              <div class="desc">Car 1</div>
            </div>
          </li>
          <li>
            <div class="mng_hover">
              <p>Start Bootstrap can help you build better websites using the Bootstrap</p>
              <div>
                <span> <i class="fas fa-phone fa-3x mb-3 sr-contact-1"></i></span>
                <span> <i class="fas fa-phone fa-3x mb-3 sr-contact-1"></i></span>
                <span> <i class="fas fa-phone fa-3x mb-3 sr-contact-1"></i></span>
                <span> <i class="fas fa-phone fa-3x mb-3 sr-contact-1"></i></span>
              </div>
            </div>
            <div class="mng_block">
              <a href="" class="mng_link">
                <img class="img-fluid" src="https://bootstrapmade.com/demo/themes/eStartup/img/team/1.jpg" alt="">
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
  ul.list_mng {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.list_mng li {
    
    width: 20%;
    float: left;
}
.mng_link img {
    filter: grayscale(100%);
    min-height: 200px;
}
.list_mng li:hover .mng_link img{
  -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}
.desc {
    background-color: #757598;
    padding: 10px 15px;
    color: #fff;
}
.list_mng li:hover .desc {
      background-color: #a2a268;
}
.mng_hover {
    background-color: #a4b5a4;
    padding: 20px 25px;
    text-align: center;
    display: inline-block;
    opacity: 0;
}
.list_mng li:hover .mng_hover {
    opacity: 1;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"team ceative effect "
Bootstrap 4.1.1 Snippet by gagan1269

Related: See More

Questions / Comments:

"team ceative effect " Bootstrap 4.1.1 Snippet by gagan1269

Related: See More

Questions / Comments:

"team ceative effect "
Bootstrap 4.1.1 Snippet by gagan1269