Welcome User
Login
Register
bottom to top hover
Alok Nandan
HTML
CSS
JS
Preview
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="container"> <img src="../../images/userlogo.png" alt="Avatar" class="image"> <div class="overlay"> <div class="text">Hello Dude</div> </div> </div> </body> </html>
.container { position: relative; width: 20%; margin:auto; } .image { display: block; width: 300px; height: 300px; } .overlay { position: absolute; bottom: 0; left: 0; right: 0; background-color: #008CBA; overflow: hidden; width: 300px; height: 0; transition: .5s ease; } .container:hover .overlay { height: 300px; } .text { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } /*===============*/
View Another Modules
Login Form
Login Form
Mega Menu Bootstrap4
Mega Menu Bootstrap4
Hover Effect
Hover Effect
Dynamic Textbox Add
Dynamic Textbox Add
Registration Form
Registration Form
Bar Chart
Bar Chart
