"card hover"
Bootstrap 4.1.1 Snippet by QuiTVo

<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 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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-6"> <div class="thumbnail img-thumb-bg"> <div class="overlay"></div> <div class="caption"> <div class="tag"><a href="#">R sdsdeal Estate</a></div> <div class="title"><a href="#">Gorgeous Ensea House in California</a></div> <div class="clearfix"> <span class="meta-data">By <a href="">Admin</a>on 29/06/2016</span> <span class="meta-data pull-right"><a href=""><i class="fa fa-heart-o"></i> 4</a></span> </div> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo nulla porro qui quo expedita voluptas ab iure dolore.</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-6"> <div class="thumbnail img-thumb-bg"> <div class="overlay"></div> <div class="caption"> <div class="tag"><a href="#">Real Estate</a></div> <div class="title"><a href="#">Gorgeous Ensea House in California</a></div> <div class="clearfix"> <span class="meta-data">By <a href="">Admin</a>on 29/06/2016</span> <span class="meta-data pull-right"><a href=""><i class="fa fa-heart-o"></i> 4</a></span> </div> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo nulla porro qui quo expedita voluptas ab iure dolore.</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-6"> <div class="thumbnail img-thumb-bg"> <div class="overlay"></div> <div class="caption"> <div class="tag"><a href="#">Real Estate</a></div> <div class="title"><a href="#">Gorgeous Ensea House in California</a></div> <div class="clearfix"> <span class="meta-data">By <a href="">Admin</a>on 29/06/2016</span> <span class="meta-data pull-right"><a href=""><i class="fa fa-heart-o"></i> 4</a></span> </div> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo nulla porro qui quo expedita voluptas ab iure dolore.</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-6"> <div class="thumbnail img-thumb-bg"> <div class="overlay"></div> <div class="caption"> <div class="tag"><a href="#">Real Estate</a></div> <div class="title"><a href="#">Gorgeous Ensea House in California</a></div> <div class="clearfix"> <span class="meta-data">By <a href="">Admin</a>on 29/06/2016</span> <span class="meta-data pull-right"><a href=""><i class="fa fa-heart-o"></i> 4</a></span> </div> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo nulla porro qui quo expedita voluptas ab iure dolore.</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-6"> <div class="thumbnail img-thumb-bg"> <div class="overlay"></div> <div class="caption"> <div class="tag"><a href="#">Real Estate</a></div> <div class="title"><a href="#">Gorgeous Ensea House in California</a></div> <div class="clearfix"> <span class="meta-data">By <a href="">Admin</a>on 29/06/2016</span> <span class="meta-data pull-right"><a href=""><i class="fa fa-heart-o"></i> 4</a></span> </div> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo nulla porro qui quo expedita voluptas ab iure dolore.</p> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-6"> <div class="thumbnail img-thumb-bg"> <div class="overlay"></div> <div class="caption"> <div class="tag"><a href="#">Real Estate</a></div> <div class="title"><a href="#">Gorgeous Ensea House in California</a></div> <div class="clearfix"> <span class="meta-data">By <a href="">Admin</a>on 29/06/2016</span> <span class="meta-data pull-right"><a href=""><i class="fa fa-heart-o"></i> 4</a></span> </div> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo nulla porro qui quo expedita voluptas ab iure dolore.</p> </div> </div> </div> </div> </div> </div>
body { padding: 10px 0; background-color: #f4f4f4; font-family: 'Montserrat', sans-serif; } a { text-decoration: none; transition: all 0.3s ease-in-out; } a:hover, a:focus, a:active { text-decoration: none; } .btn { text-transform: uppercase; } .btn.btn-lg { padding: 6px 30px; } .thumbnail-title { font-size: 20px; margin-top: 5px; } .img-thumb-bg { padding: 0; overflow: hidden; min-height: 200px; position: relative; border-radius: 3px; background-position: center; background-color: transparent; background-image: url('http://projects.mostlikers.com/_images/estate-image.jpg'); } .img-thumb-bg p { color: #fff; margin-bottom: 0; line-height: 16px; } .img-thumb-bg .overlay { top: 0; left: 0; right: 0; bottom: 0; position: absolute; transition: all 0.3s ease-in-out; background: rgba(0, 0, 0, 0); background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 50%, #000000 100%); background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 50%, #000000 100%); background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 50%, #000000 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, #000000 100%); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, #000000 100%); background: -webkit-gradient(left top, left bottom, color-stop(50%, rgba(0, 0, 0, 0)), color-stop(100%, #000000)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=0); } .img-thumb-bg .caption { bottom: -5px; height: 100px; font-size: 12px; position: absolute; padding: 0 20px 20px; transition: all 0.3s ease-in-out; } .img-thumb-bg .caption .tag a { color: #fff; padding: 0 5px; font-size: 12px; border-radius: 2px; display: inline-block; text-transform: uppercase; background-color: #2980B9; } .img-thumb-bg .caption .title { margin-top: 5px; font-size: 18px; line-height: 20px; text-transform: uppercase; } .img-thumb-bg .caption .title a { color: #fff; } .img-thumb-bg .caption .title a:hover { color: #2980B9; } .img-thumb-bg .caption .meta-data { display: none; color: #777; font-size: 12px; line-height: 12px; margin-top: 10px; } .img-thumb-bg .caption .meta-data a { color: #777; } .img-thumb-bg .caption .meta-data a .fa { color: #2980B9; } .img-thumb-bg .caption .meta-data a:hover { color: #2980B9; } .img-thumb-bg .caption .content { display: none; } .img-thumb-bg:hover .overlay { background: rgba(46, 49, 58, 0.8); } .img-thumb-bg:hover .caption { bottom: 60px; } .img-thumb-bg:hover .caption .meta-data { display: block; } .img-thumb-bg:hover .caption .content { display: block; }

Related: See More


Questions / Comments: