in this tutorial, I will show you how to make a cool Image Hover effect in HTML and CSS, we will make a cool Overley sliding effect. Using Hover property will allow you to add an effect or an animation when the mouse hovers an element.
Source Code
HTML Code
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="main.css"> </head> <body> <div class="container"> <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"> <div class="overly"> <h1>Your text</h1> </div> </div> </body> </html>
CSS Code
*{ margin: 0; padding: 0; outline: 0; } .container{ width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); overflow: hidden; } .container img{ width: 100%; height: 100%; } .container .overly{ position: absolute; left: 0; top: 0; bottom: 0; right: 0; background-color: rgba(68, 134, 246,.6); transform: translateY(100%); transition: .4s; } .container .overly h1{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); text-transform: uppercase; padding: 15px 10px; border: 3px solid #fafafa; color: #fafafa; } .container:hover .overly{ transform: translateY(0); }
And That's It you can try it by yourself, and try to make slide from the left
Image Hover Effect - Slide in Overley From the bottom
Reviewed by Medics
on
August 04, 2019
Rating:
No comments: