A Pen by Jitendra Vyas.

A-Pen-by-Jitendra-Vyas.markdown

A Pen by Jitendra Vyas

A Pen by Jitendra Vyas on CodePen.

License.

index.html

<div class="row borrowers-thumbnails">
  <div class="col-xs-6 col-sm-3 col-md-3">
    <figure class="thumbnail">
      <img class="gallery-thumbnail" src="http://lorempixel.com/600/450/" alt="">
      <figcaption class="truncate caption"></figcaption>
    </figure>
  </div>
  <div class="col-xs-6 col-sm-3 col-md-3">
    <figure class="thumbnail">
      <img class="gallery-thumbnail" src="http://lorempixel.com/600/450/" alt="">
      <figcaption class="truncate caption"></figcaption>
    </figure>
  </div>
  <div class="col-xs-6 col-sm-3 col-md-3">
    <figure class="thumbnail">
     <img class="gallery-thumbnail" src="http://lorempixel.com/600/450/" alt="">
      <figcaption class="truncate caption"></figcaption>
    </figure>
  </div>
  <div class="col-xs-6 col-sm-3 col-md-3">
    <figure class="thumbnail">
       <img class="gallery-thumbnail" src="http://lorempixel.com/600/450/" alt="">
      <figcaption class="truncate caption"></figcaption>
    </figure>
  </div>
</div>

<div id="myModal" class="modal fade campaign-borrowers" tabindex="-1" role="dialog">
  <div class="modal-dialog">
  <div class="modal-content">
	<div class="modal-body">
		
	</div>
	<div class="modal-footer">
		<button class="btn btn-default" data-dismiss="modal">Close</button>
	</div>
   </div>
  </div>
</div>

script.js

$('.thumbnail').click(function(){
  	$('.modal-body').empty();
  	var title = $(this).parent('a').attr("title");
  	$('.modal-title').html(title);
  	$($(this).parents('div').html()).appendTo('.modal-body');
  	$('#myModal').modal({show:true});
});

style.scss

@import "compass";
.thumbnail {display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857;
background-color: white;
border: 0;
border-radius: none;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;}

.campaign-borrowers {

.modal-body {padding-bottom:0}
.modal-body .thumbnail { margin-bottom:0  }
.modal-footer {margin-top:0 !important;border:0;padding-top:0}
}