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 Image Hover Hover 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