<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container customer">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
<ul class="casestudy-tab">
<li>
<div class="commonbg-casestudy reddys-casestudy"></div>
<div class="content-section">
<div class="casestudy-desc">
<i class="reddys-logo"></i>
<p>Lorem Ipsum, giving information on its origins</p>
<a href="#">Read more<span></span></a>
</div>
</div>
</li>
</ul>
</div>
</div>
.casestudy-tab {
overflow: hidden;
margin-bottom: 10px;
margin-top: 25px;
text-align: center;
}
.customer .casestudy-tab li {
width: 558px;
height: 187px;
border-radius: 15px;
position: relative;
display: inline-block;
float: none;
border: 1px solid rgba(198,198,198,0.4);
}
.customer .casestudy-tab li .reddys-casestudy {
background-position: -194px -189px;
}
.customer .casestudy-tab li .commonbg-casestudy {
z-index: 1;
border-radius: 15px;
width: 100%;
height: 100%;
background: url(../new_images/resources/thumbs-sprite.jpg) no-repeat;
background-position: 0 0;
}
.customer .casestudy-tab li .content-section {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
border-radius: 15px;
-webkit-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.casestudy-desc {
float: right;
width: 382px;
height: 187px;
border-radius: 16px 15px 15px 16px/15px;
background-color: #fff;
-webkit-box-shadow: -13px 1px 8px rgba(0,0,0,.18);
box-shadow: -13px 1px 8px rgba(0,0,0,.18);
border: solid 0 rgba(198,198,198,.4);
background-image: -webkit-linear-gradient(bottom,rgba(0,0,0,.04),rgba(255,255,255,.04) 30%);
background-image: -o-linear-gradient(bottom,rgba(0,0,0,.04),rgba(255,255,255,.04) 30%);
background-image: -webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.04)),color-stop(30%,rgba(255,255,255,.04)));
background-image: -webkit-gradient(linear,left bottom, left top,from(rgba(0,0,0,.04)),color-stop(30%, rgba(255,255,255,.04)));
background-image: linear-gradient(to top,rgba(0,0,0,.04),rgba(255,255,255,.04) 30%);
text-align: right;
}
.reddys-logo {
-webkit-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
width: 162px;
height: 65px;
background: url(../new_images/resources/casestudy-logosprite.png) no-repeat;
float: right;
margin-right: 27px;
margin-top: 20px;
background-position: -396px -257px;
}
.casestudy-desc p {
color: #5a5a5a;
font-size: 15px;
width: 82%;
float: right;
line-height: 24px;
padding-top: 0;
margin-bottom: 6px;
padding-right: 27px;
}
.customer .casestudy-tab a {
float: right;
}
.casestudy-desc a {
margin-top: 0;
color: #5085a1;
font-size: 16px;
margin-right: 29px;
}
.casestudy-desc a span {
display: inline-block;
position: relative;
top: 4px;
width: 16px;
right: -2px;
height: 16px;
background: url(../new_images/resources/casestudy-logosprite.png) no-repeat;
background-position: -479px -887px;
}
