Image Hover Effect - Slide in Overlay from the Left HTML CSS Posted by Yahya Benlachheb on September 17, 2017 Get link Facebook Twitter Pinterest Email Other Apps HTML CODE <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>Image Hover</title> </head> <body> <div class="post"> <img src="1.jpg" alt=""> <div class="post-s"> <h2> Hover</h2> </div> </div> </body> </html> CSS CODE body{ background: #f1f1f1; font-family: 'intro'; margin: 0; padding: 0; } .post{ width: 600px; height: 400px; position: relative; cursor: pointer; } .post:hover .post-s{ width: 600px; } .post img { display: block; width: 600px; height: 400px; } .post-s{ width: 0px; height: 400px; background: rgba(103, 58, 183, 0.71); position: absolute; top: 0; display: flex; justify-content: center; align-items: center; overflow: hidden; transition: 0.7s ease; } .post-s h2{ color: white; font-size: 50px; border: 6px solid white; padding: 10px 30px; } Comments radhaMarch 13, 2018 at 9:31 AMNice .useful for beginners UI online course ReplyDeleteRepliesReplyahmed prsMay 1, 2018 at 11:04 PMthank you great job my freind ReplyDeleteRepliesReplyLutherXDAugust 20, 2019 at 4:26 AMThank dudeReplyDeleteRepliesReplyveerarajDecember 18, 2020 at 4:36 PMThanks for sharing valuable information.visit : Digital Marketing Training in Chennai || Digital Marketing Course in ChennaiReplyDeleteRepliesReplyAdd commentLoad more... Post a Comment
Nice .useful for beginners UI online course
ReplyDeletethank you great job my freind
ReplyDeleteThank dude
ReplyDeleteThanks for sharing valuable information.
ReplyDeletevisit : Digital Marketing Training in Chennai || Digital Marketing Course in Chennai