Image Hover Effect - Slide in Overlay from the Left HTML CSS 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 ReplyDeleteRepliesUnknownSeptember 13, 2021 at 9:55 PMGreat Article Image Processing Projects Deep Learning Projects for Final Year JavaScript Training in Chennai JavaScript Training in Chennai The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training Project Centers in Chennai DeleteRepliesReplyReplyahmed 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
ReplyDeleteGreat Article Image Processing Projects Deep Learning Projects for Final Year JavaScript Training in Chennai JavaScript Training in Chennai The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training Project Centers in Chennai
Deletethank you great job my freind
ReplyDeleteThank dude
ReplyDeleteThanks for sharing valuable information.
ReplyDeletevisit : Digital Marketing Training in Chennai || Digital Marketing Course in Chennai