Bootstrap 3 thumbnail list with font awesome RWD

Bootstrap 3 thumbnail list with font awesome + RWD

by Andrew Pougher

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
            <!-- With titles (frame) -->
            <h4>Items with titles</h4>
            <div class="row">
                <div class="col-lg-3 col-md-6 col-sm-6">
                    
                    
                    <div class="widget">
                        <div class="thumbnail">
                            <div class="thumb">
                                <img alt="" src="http://placehold.it/350x150">
                                <div class="thumb-options">
                                    <span>
                                        <a href="#" class="btn btn-icon btn-default"><i class="fa fa-pencil"></i></a>
                                        <a href="#" class="btn btn-icon btn-default"><i class="fa fa-times"></i></a>
                                    </span>
                                </div>
                            </div>
                            <div class="caption">
                                <a href="#" title="" class="caption-title">Aenean Malesuada Consectetur Risus</a>
                                Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur mollis ornare vel leo.
                            </div>
                        </div>
                    </div>

                    <div class="widget">
                        <div class="thumbnail">
                            <div class="thumb">
                                <img alt="" src="http://placehold.it/350x150">
                                <div class="thumb-options">
                                    <span>
                                        <a href="#" class="btn btn-icon...

CSS

/* ===== Thumbnail ===== */

.thumbnail {
  position: relative;
  margin-bottom: 0;
  text-align: center;
  border: 1px solid #272C30;
  padding: 2px;
  border-radius: 2px;
  background-color: #2A2F31;
  box-shadow: 0 1px 0 #4B4E50, inset 0 0 2px #272B2C;
-webkit-box-shadow: 0 1px 0 #4B4E50, inset 0 0 2px #272B2C;
-moz-box-shadow: 0 1px 0 #4B4E50, inset 0 0 2px #272B2C;
}
.thumbnail .caption {
  padding: 12px 12px;
  text-align: left;
  color: #ddd;
}
.thumbnail .caption.text-center {
  text-align: center;
}
.thumbnail .caption h6 small {
  display: block;
  margin-top: 4px;
}


.caption .caption-title { 
  font-size: 14px; 
  margin-bottom: 8px; 
  display: block; 
}

.thumbnail-boxed .item-info {
  margin-bottom: 12px;
}

.thumbnail img,
.thumbnail a img {
  margin-right: auto;
  margin-left: auto;
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  z-index: 2;
  border-radius: 2px;
}

.thumb { 
  position: relative; 
  display: block; 
}
.thumb:hover 
.thumb-options {
  opacity: 1;
}

.thumbnail iframe {
  width: 100%;
  max-width: 100%;
  height: 250px;
  border: 0;
}


/* Thumb options on hover */

.thumb-zoom { 
  background: #32434D url(zoom.png) no-repeat 50%; 
  display: block; 
  border-radius: 2px; 
  border: 0; 
}
.thumb-zoom img { 
  opacity: 1; 
}
.thumb-zoom:hover img { 
  opacity: 0.2; 
}


.thumb-options {
  border-radius: 2px;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(50,67,77,0.8);
  height: 100%;
  width: 100%;
  opacity: 0;
  text-align: center;
}
.thumb-options span {
  display: block;
    top: 50%;
  position: absolute;
  margin-top: -17px;
  width: 100%;

}
.thumb-options span a + a {
  margin-left: 5px;
}

.widget {
  margin-bottom: 30px;
}


@media (min-width: 768px){
    
.thumb-options{
       -webkit-transition: all 0.15s ease-in-out; 
       -moz-transition: all 0.15s ease-in-out;
         -o-transition: all 0.15s ease-in-out;
            transition: all 0.15s ease-in-out;
}
}