Speaker cards with neat hover effect
<div class="row">
<div class="col-sm-4 col-xs-6">
<a class="mediacard" href="#">
<div class="shadow-left">
<div class="shadow-right">
<div class="mediacard-photo">
<img src="img/speaker.jpg" width="100%"/>
</div>
<div class="btn btn-default btn-block btn-mediacard">Watch the talk</div>
<h4>Speaker name</h4>
<p>Something special about this guy ?</p>
</div>
</div>
</a>
</div>
</div>
On a gray background
<div class="well">
<div class="row">
<div class="col-sm-4 col-xs-6">
<a class="mediacard" href="#">
<div class="shadow-left">
<div class="shadow-right">
<div class="mediacard-photo">
<img src="img/speaker.jpg" width="100%"/>
</div>
<div class="btn btn-default btn-block btn-mediacard">Watch the talk</div>
<h4>Speaker name</h4>
<p>Something special about this guy ?</p>
</div>
</div>
</a>
</div>
<div class="col-sm-4 col-xs-6">
<a class="mediacard" href="#">
<div class="shadow-left">
<div class="shadow-right">
<div class="mediacard-photo">
<img src="img/speaker.jpg" width="100%"/>
</div>
<div class="btn btn-default btn-block btn-mediacard">Watch the talk</div>
<h4>Speaker name</h4>
<p>Something special about this guy ?</p>
</div>
</div>
</a>
</div>
<div class="col-sm-4 col-xs-6">
<a class="mediacard" href="#">
<div class="shadow-left">
<div class="shadow-right">
<div class="mediacard-photo">
<img src="img/speaker.jpg" width="100%"/>
</div>
<div class="btn btn-default btn-block btn-mediacard">Watch the talk</div>
<h4>Speaker name</h4>
<p>Something special about this guy ?</p>
</div>
</div>
</a>
</div>
</div>
</div>