<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="hover"> <div class="wraper"> <img src="https://www.elastic.co/assets/bltada7771f270d08f6/enhanced-buzz-1492-1379411828-15.jpg"> <div class="overlay-text"> <h3>TIGER</h3> <P>TIGER</P> <A href="#">Read more</A> </div> </div> </div> </div> <h2 class="ayush">AYUSH THAKUR</h2>

.ayush { color: red; text-align: center; width: 100%; font-size: 35px; position: relative; top: 40px; left:140px; text-shadow: 2px 2px 1px yellow; } .hover { width: 50%; margin: auto; display: block; overflow: hidden; margin-top:50px; } .wraper { width: 100%; float: right; position: relative; } .wraper img { width: 50%; } .overlay { width: 50%; text-align: center; position: absolute; top: 100%;opacity: 0; height: 100%; background-color: rgba(0,0,0,0.6); transition: all ease-in-out 0.5s;opacity: 0; } .overlay-text { position: absolute; left: 0; right: 0; top: 21px; } .overlay-text h3 { font-size: 36px; color: white; margin: 0; } .overlay-text p { font-size: 24px; color: white; } .overlay-text a { color: red; font-size: 17px; } .wraper:hover .overlay { opacity: 1; top: 0; transition: all ease-in-out 1s; }