<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 ----------> <section id="our-blog" class="half-section bglight"> <div class="container-fluid"> <div class="row"> <div class="col-md-4 nopadding"></div> <div class="col-md-4 col-sm-12 nopadding"> <div class="image hover-effect"><img src="http://themesindustry.com/html/novexl-demo-template/images/split-blog.jpg" alt="our blog" class="equalheight"></div> </div> <div class="col-md-4 nopadding"></div> </div> </div> </section>

.half-section { width: 100%; } .half-section, .half-section .img-container { position: relative; overflow: hidden; } .half-section .img-container {} .half-section .imgone { background: url("../images/split-img1.jpg") no-repeat; } .half-section .imgtwo { background: url("../images/split-img2.jpg") no-repeat; } .bglight { background: #f6f6f6; } .nopadding { padding: 0; } .image { overflow: hidden; } a.image { display: block; } .image img { width: 100%; display: block; } .image, .image img { position: relative; } .hover-effect::before, .hover-effect::after { content: ""; background: #fff; height: 0; width: 0; z-index: 1; position: absolute; -webkit-transition-duration: 1.3s; -o-transition-duration: 1.3s; transition-duration: 1.3s; } .hover-effect::before { right: 0; opacity: 1; top: 0; } .hover-effect::after { bottom: 0; opacity: .7; left: 0; } .hover-effect:hover::after, .hover-effect:hover::before { height: 100%; opacity: 0; width: 100%; } .heading-title h2 { line-height: normal; } .heading-title > span { font-size: 1rem; }