"Simple Image Shadow Effect"
Bootstrap 3.0.0 Snippet by bruno137136

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <div class="container ss-item"> <div class="row"> <div class="col-xs-12"> <img src="http://success-at-work.com/wp-content/uploads/2015/04/free-stock-photos.gif" alt="Title" class="img-responsive"> <div class="ss-item-text"> <h4>Title of Image</h4> </div> </div> </div> </div>
.ss-item .ss-item-text{ background-color:white; text-align:center; padding: 10px 20px; border-radius:0 0 5px 5px; font-weight:bold; } .ss-item .ss-item-text, .ss-item img{ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); width:300px; } .ss-item img{ border-radius:5px 5px 0 0; } .ss-item img:hover{ opacity:0.8; filter: alpha(opacity=80); }

Related: See More


Questions / Comments: