" featured article"
Bootstrap 3.3.0 Snippet by riosande

<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 ----------> <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> featured article </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">BALI’S RELIGIOUS TOLERANCE : AN INSPIRATION</h4> </div> <div class="modal-body"> A religious building site on the Bukit peninsula, in the south of Bali represents Bali’s philosophy on religious tolerance and may very well be the only one of its kind in the world. It is also a reminder of a powerful message for religious tolerance for all of us to take in, take back home, and spread. </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>
body{ background: #333; } .cover-card { border: 2px solid white; background: silver; padding: 0px; margin: 0px; height:200px; } .cover-card > p { text-align: center; background-color: rgba(6,6,6,0.0); color: rgba(6,6,6,0.0); width: 100%; height: 100%; font-weight: bold; font-size: 20px; } .cover-card:hover > p { background-color: rgba(6,6,6,0.3); color: white; text-shadow: 3px 3px 10px #000; }

Related: See More


Questions / Comments: