<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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"> <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image" style="width:100%"> <div class="middle"> <div class="text">JOHN DOE</div> </div> </div>

.container-div { position: relative; width: 50%; } .image { opacity: 1; display: block; width: 100%; height: auto; transition: .5s ease; backface-visibility: hidden; } .middle { transition: .5s ease; opacity: 0; position: absolute; top: 0%; left: 0%; background-color: rgba(0,0,0,0.4); text-align: center; width: 100%; height: 100%; } .container-div:hover .middle { opacity: 1; } .text { margin-top: 50%; color: white; font-size: 20px; padding: 16px 32px; font-weight: bold; }