"Bootstrap 4 cards with images"
Bootstrap 4.1.1 Snippet by dkstudio

<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; }

Related: See More


Questions / Comments: