Bootstrap 3 Template
This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.
HTML
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container top-buffer">
<div class="row">
<div class="col-md-6 col-lg-4">
<div class="box">
<div class="box__inner blockone">
<span class="box__text"> Entitlements for application using a testt</span>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4" style="background-color:lavenderblush;">.col-sm-4</div>
<div class="col-md-6 col-lg-4" style="background-color:lavender;">.col-sm-4</div>
</div>
</div>
CSS
.top-buffer {
margin-top: 40px;
}
/*
Boxes background
*/
.blockone {
background-color: black;
/* fallback color */
background: url("https://media.timeout.com/images/101602611/image.jpg");
box-shadow: inset 0 0 0 1000px rgba(255, 128, 0, 0.8); }
.box:hover .box__inner.blockone, .box:focus .box__inner.blockone {
box-shadow: inset 0 0 0 1000px rgba(255, 128, 0, 0.6); }
/*
Boxes main
*/
.box {
width: 400px;
height: 170px;
overflow: hidden;
display: inline-block;
cursor: pointer;
border-radius: 7px; }
.box__inner {
height: 100%;
width: 100%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border-radius: 7px;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s; }
.box:hover {
border-radius: 7px; }
.box:hover .box__inner, .box:focus .box__inner {
-ms-transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
border-radius: 7px; }
.box__inner .box__text {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out; }
.box__text {
visibility: hidden;
color: #fff;
font-size: 0.75em;
position: absolute;
top: 300px;
left: 0;
bottom: 0;
right: 0;
text-align: center;
margin: auto; }
.box:hover .box__text {
visibility: visible;
opacity: 1;
position: absolute;
top: 100px;
cursor: pointer;
/* text-decoration: none*/ }
JavaScript
/* Latest compiled and minified JavaScript included as External Resource */