"Untitled"
Bootstrap 4.1.1 Snippet by KelvinMacwan

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <html> <head runat="server"> <title>Opening</title> </head> <body> <form id="form1" runat="server"> <div class="wrapper"> <div class="main">Hi I am Kelvin Macwan<br> follow Me <br> on Facebook :<a href="https://www.facebook.com/kelvin.macwan.944" target="_blank">https://www.facebook.com/kelvin.macwan.944</a></a><br> on Instagram :<a href="https://www.instagram.com/kelvinmacwan343" target="_blank">https://www.instagram.com/kelvinmacwan343/</a> <div class="left"> <img id="i1" src="https://quotefancy.com/media/wallpaper/3840x2160/2065552-Steve-Backley-Quote-Success-is-a-decision-not-a-gift.jpg" alt="" /> </div> <div class="right"> <img id="i2" src="https://www.yourselfquotes.com/wp-content/uploads/Motivational-Quote.jpg" alt="" /> </div> </div> </div> </form> </body> </html>
.wrapper { height:300px; width:100%; position:relative; overflow:hidden; box-shadow:10px 0px 100px 10px; } .main { height:100%; width:100%; padding-top:50px; padding-bottom;150px; background:black; color:white; font-size:xx-large; text-align:center; } .left,.right { height:100%; width:50%; position:absolute; top:0px; left:0px; transition:all 1s ease; overflow:hidden; } .left { right:50%; } .right { left:50%; } #i1,#i2 { height:100%; width:100%; } #i2 { position:absolute; left:0px; } .wrapper:hover .left { left:-50%; } .wrapper:hover .right { left:100%; }

Related: See More

BLK• Design System

Questions / Comments: