"hover image"
Bootstrap 4.0.0 Snippet by Ashwani Rawat

Post to Facebook Tweet this

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>HTML Tutorial</title> <link href="css/style.css" rel="stylesheet"/> </head> <body> <div class="wrapper"> <div class="sa_image-overlay"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTMhNx4GCcj9IGSTT5LrvX0GHjWD-hjb7yB-z2N9MZthhlmxwKy" alt="image"/> <div class="sa_overlay"> <div class="sa_text">Hello World</div> </div> </div> </div> </body> </html>
*{margin:0; padding:0;} .sa_image-overlay { position: relative; width: 284px; } .sa_image { display: block; width: 100%; height: auto; } .sa_overlay { position: absolute; bottom: 0; left: 0; right: 0; background-color:red; overflow: hidden; width: 100%; height: 100%; -webkit-transform:scale(0); transition: .3s ease; } .sa_image-overlay:hover .sa_overlay { transform: scale(1) } .sa_text { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; }

Related: See More

Vue Now UI Kit
Image Crop jQuery
Hover Effect Style
Different types of hover and transition effect.

Questions / Comments: