"Overlay on Image"
Bootstrap 3.3.0 Snippet by RajeshPatadiya

<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 ----------> <div class="thumbnail"> <img src="https://static.pexels.com/photos/24324/pexels-photo.jpg" alt="..." /> <div class="caption post-content"> </div> <div class="details"> <h3>Robots!</h3> <p>Lorem ipsum dolor sit amet</p> </div> </div>
.post-content { opacity: 0.5; top:0; left:0; min-width: 500px; min-height: 500px; position: absolute; color: #ffffff; } .thumbnail{ position:relative; } .details { position: absolute; z-index: 2; top: 0; color: #ffffff; }

Related: See More


Questions / Comments: