<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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="container"> <div class="box"> <figure> <img src="https://www.hdwallpapers.in/walls/autumn_bench-HD.jpg"> <figcaption> <h1>Text Overlay Hover Effect</h1> <p> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. </p> </figcaption> </figure> </div> </div>

body { margin: 0; padding:0; font-family: arial; color: #fff; text-align: center; } .box { width: 400px; height: 400px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); overflow: hidden; } .box figure { height:100%; margin: 0; padding: 0; } .box figure img { width:100%; height: 100%; } .box figcaption { position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 80px 20px; z-index:100; opacity:0; transition-delay: .3s; transition:.5s ease; } .box:hover figcaption { opacity:1; } .box figure:before, .box figure:after { content: ''; position: absolute; transition: .5s ease-in-out; height: 200%; width: 200%; background: #000; } .box figure:before { right: 0; bottom: 0; background: rgba(255,0,0,.8); transform: skew(45deg) translateX(100%); } .box figure:after { left: 0; top: 0; background: rgba(0,0,255,.8); transform: skew(-135deg) translateX(-100%); } .box:hover figure:before { transform: skew(45deg) translateX(0%); } .box:hover figure:after { transform: skew(-135deg) translateX(0%); }