"Thumbnails"
Bootstrap 3.3.0 Snippet by Amol123

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Products Grid</title> <link rel="stylesheet" type="text/css" href="style.css"> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <style type="text/css"> .outerpadding{ padding:10% 0%;} .boximg{ position:relative; overflow:hidden; } .boximg img{ transition:all ease-in 500ms; border:1px solid #fff; } .boximg img:hover{ transform:scale(1.3,1.3); cursor:pointer; } .boximg:hover{ border:1px solid #fff; } .date{ left: 0; position: absolute; top: 15px; padding:5px; background-color:teal; opacity:0; transition:all ease-in 300ms; } .likebut{ background: none repeat scroll 0 0 teal; height: 25px; padding: 7px; position: absolute; right: 5px; top: 130px; width: 25px; opacity:0.4; transition:all ease-in 300ms; } .boximg:hover .date{ opacity:1; } .boximg:hover .likebut{ opacity:1; } </style> </head> <body> <div class="container outerpadding"> <div class="row"> <div class="col-lg-3"> <div class="panel"> <div class="panel-heading" style="background-color:teal;color:#fff;"><strong>Lorem Ipsum</strong></div> <div class="panel-body" style="background-color:#000;color:#fff; box-shadow:0 -12px 13px teal inset;"> <div class="boximg"> <img src="http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_52c470899a2e1_1.JPG" class="img-responsive"> <span class="label label-danger date">25 December 2015</span> <span class="likebut glyphicon glyphicon-tag"></span> </div> <br> <p class="pull-left">Lorem ipsum Lorem ipsum<br> <span class="glyphicon glyphicon-star" style="font-size:18px;"></span> <span class="glyphicon glyphicon-star" style="font-size:18px;"></span> <span class="glyphicon glyphicon-star" style="font-size:18px;"></span> <span class="glyphicon glyphicon-star" style="font-size:18px;"></span> <span class="glyphicon glyphicon-star-empty" style="font-size:18px;"></span> </p> <span class="badge pull-right" style="background-color:teal">25</span> </div> </div> </div> <div class="col-lg-3"> <div class="panel"> <div class="panel-heading" style="background-color:teal;color:#fff;"><strong>Lorem Ipsum</strong></div> <div class="panel-body" style="background-color:#000;color:#fff; box-shadow:0 -12px 13px teal inset;"> <div class="boximg"> <img src="http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_52c470899a2e1_1.JPG" class="img-responsive"> <span class="label label-danger date">25 December 2015</span> <span class="likebut glyphicon glyphicon-tag"></span> </div> <br> <p class="pull-left">Lorem ipsum Lorem ipsum<br> <span class="glyphicon glyphicon-star" style="font-size:18px;"></span> <span class="glyphicon glyphicon-star" style="font-size:18px;"></span> <span class="glyphicon glyphicon-star" style="font-size:18px;"></span> <span class="glyphicon glyphicon-star" style="font-size:18px;"></span> <span class="glyphicon glyphicon-star-empty" style="font-size:18px;"></span> </p> <span class="badge pull-right" style="background-color:teal">25</span> </div> </div> </div> <div class="col-lg-3"> <div class="panel"> <div class="panel-heading" style="background-color:teal;color:#fff;"><strong>Lorem Ipsum</strong></div> <div class="panel-body" style="background-color:#000;color:#fff; box-shadow:0 -12px 13px teal inset;"> <div class="boximg"> <img src="http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_52c470899a2e1_1.JPG" class="img-responsive"> <span class="label label-danger date">25 December 2015</span> <span class="likebut glyphicon glyphicon-tag"></span> </div> <br> <p class="pull-left">Lorem ipsum Lorem ipsum<br> <span class="glyphicon glyphicon-star" style="font-size:18px;"></span> <span class="glyphicon glyphicon-star" style="font-size:18px;"></span> <span class="glyphicon glyphicon-star" style="font-size:18px;"></span> <span class="glyphicon glyphicon-star" style="font-size:18px;"></span> <span class="glyphicon glyphicon-star-empty" style="font-size:18px;"></span> </p> <span class="badge pull-right" style="background-color:teal">25</span> </div> </div> </div> <div class="col-lg-3"> <div class="panel"> <div class="panel-heading" style="background-color:teal;color:#fff;"><strong>Lorem Ipsum</strong></div> <div class="panel-body" style="background-color:#000;color:#fff; box-shadow:0 -12px 13px teal inset;"> <div class="boximg"> <img src="http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_52c470899a2e1_1.JPG" class="img-responsive"> <span class="label label-danger date">25 December 2015</span> <span class="likebut glyphicon glyphicon-tag"></span> </div> <br> <p class="pull-left">Lorem ipsum Lorem ipsum<br> <span class="glyphicon glyphicon-star" style="font-size:18px;"></span> <span class="glyphicon glyphicon-star" style="font-size:18px;"></span> <span class="glyphicon glyphicon-star" style="font-size:18px;"></span> <span class="glyphicon glyphicon-star" style="font-size:18px;"></span> <span class="glyphicon glyphicon-star-empty" style="font-size:18px;"></span> </p> <span class="badge pull-right" style="background-color:teal">25</span> </div> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </body> </html>

Related: See More

Rotating CSS Card
Video list thumbnails
Article Thumbnails
Minimal Preview Thumbnails

Questions / Comments:

How to deal with the image overflow?

Wouter () - 6 years ago - Reply 0