<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"> <div class="imageBox"> <img src="http://www.ox.ac.uk/sites/files/oxford/styles/ow_medium_feature/public/field/field_image_main/Tarantula%20nebula.jpg?itok=xbyxz9lz"> <div class="textBox"> <h1>Image Hover effect</h1> </div> </div> </div>

body { margin:0; padding:0; background:#674664; color:#003444; } .container { margin:100px auto; width:600px } .imageBox { position:relative; overflow:hidden; } .imageBox img { width:100%; transition:.5s; } .textBox { position:absolute; top:0; left:-100%; width:100%; height:100%; background:rgba(255,0,0,.9); transition:.5s; } .textBox h1 { margin:0; padding:0; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; font-family:arial; } .imageBox:hover .textBox { left:0; } .imageBox:hover img { transform: scale(1.2); }