Bootstrap Snippet hover effect for blog 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 ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><div class="container">
    <div class="row">
    <div class="col-lg-4 botm-margn ">
        <div class="transperent_block " style="background-color:#cccccc;">
              <img src="http://i613.photobucket.com/albums/tt213/boakye51/fw_al_007_03_zpsfwzueotz.jpg" class="img-responsive" alt="">
              
              <div class="black_hover_block">
                 <div class="blur"></div>
                    <div class="black_hover_block_text">
                    <ul class="pad0 bg_black">
                        <li class="col-sm-4 float-left pad0"> 23 <span class="fa fa-comments"></span></li>
                          <li class="col-sm-4 pad0 float-left"> 3 <span class="fa fa-thumbs-o-up"></span></li>
                          <li class="col-sm-4 pad0 float-left"> 103 <span class="fa fa-share-alt"></span></li>
                        <div class="clearfix"></div>
                      </ul>
                      
                           <h5 class="titl-h5">blog heading...</h5>
                          <p>Loren ipsum dolor si amet ipsum dolor si amet ipsum dolor...</p>
                          <a class=" btn btn-default btn-sm btn-pink" href="#">READ MORE</a> 
                         <div class="block_header">
                                <a href="#"><i class="fa fa-facebook" data-toggle="tooltip"  title="Facebook" data-original-title="Facebook"></i></a>
                                <a href="#"><i class="fa fa-twitter" data-toggle="tooltip"  title="Twitter" data-original-title="Twitter"></i></a>
                                <a href="#"><i class="fa fa-google-plus" data-toggle="tooltip"  title="Google" data-original-title="Google Plus"></i></a>
                                <a href="#"><i class="fa fa-youtube" data-toggle="tooltip" title="Youtube" data-original-title="Youtube"></i></a>
                                <a href="#"><i class="fa fa-github" data-toggle="tooltip" title="Github" data-original-title="Github"></i></a>
                                <a href="#"><i class="fa fa-linkedin" data-toggle="tooltip"  title="Linkedin" data-original-title="Linkedin"></i></a>
                                <a href="#"><i class="fa fa-flickr" data-toggle="tooltip"  title="Flickr" data-original-title="Flickr"></i></a>
                                <a href="#"><i class="fa fa-skype" data-toggle="tooltip"  title="Skype" data-original-title="Skype"></i></a>
                            </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
.pad0
{
padding:0px;
}
.bg_black{
background:#000;
}
.block-blog {
    width: 100%;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: rgba(226, 223, 223, 0.61);
}
.transperent_block {
    padding: 0px;
    position: relative;
    overflow: hidden;
    height: 250px;
}
.transperent_block img {
width:100%;
    height: 100%;
}
.transperent_block:hover .black_hover_block {
    opacity: 1;
    transform: translateY(-150px);
    -webkit-transform: translateY(-150px);
    -moz-transform: translateY(-150px);
    -ms-transform: translateY(-150px);
    -o-transform: translateY(-150px);
}
.transperent_block img {
    z-index: 4;
}
.transperent_block .black_hover_block {
    position: absolute;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"hover effect for blog"
Bootstrap 4.1.1 Snippet by chanagond

Related: See More

Questions / Comments:

"hover effect for blog" Bootstrap 4.1.1 Snippet by chanagond

Related: See More

Questions / Comments:

"hover effect for blog"
Bootstrap 4.1.1 Snippet by chanagond