Speaker

Usage of Mediacard for Speaker

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>