Posts

Zip Welcome

Image
<!DOCTYPE html> <html> <head> <title>Scroll</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <section> <div class="bg"></div> </section> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <script type="text/javascript"> $(document).ready(function () { $(window).scroll(function(){ var scrollpos = $(window).scrollTop(); $('.bg').css({ 'height': +(scrollpos)+'px' }) }) }); </script> </body> </html> <style type="text/css"> body{margin: 0px; padding: 0px; min-height: 1550px;} section{position: relative; min-height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; } .bg{position: fixed; background: url(full-img.png); background-size: cover; background-attachment:...
Post a Comment
Read more

image comparion slider using Html Css & Java Script

Image
<!DOCTYPE html> <html> <head> <title>Change</title> </head> <body> <section> <div id="layer"></div> </section> <script type="text/javascript"> var slide = document.getElementById('layer'); window.onmousemove = function (e) { var x = e.clientX; slide.style.left = x + 'px'; } </script> </body> </html> <style type="text/css"> body{margin: 0px; padding: 0px; } section{ position: absolute; width: 100%; height: 100vh; overflow: hidden; background: url(img-1.jpg)no-repeat; background-attachment: fixed; } #layer{ position: absolute; top: 0px; left: 0px; width: 100%; height: 100vh; background: url(img-2.jpg)no-repeat; border-left: 2px solid #000; background-attachment: fixed; } </style>
Post a Comment
Read more

CSS Isometric Glass Layered Image Hover

Image
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div class="box"> <div class="glass"></div> <div class="glass"></div> </div> </body> </html> <style type="text/css"> body{ margin: 0px; padding: 0px; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #36363c; } .box{ position: relative; width: 300px; height: 576px; background: url(img.jpg); transform: rotate(-45deg) skewY(25deg); box-shadow: -25px 40px 4px rgba(0, 0, 0, 0.2); transition: 0.5s; } .box:hover{ transform: rotate(-45deg) skewY(25deg) translate(20px,-20px); box-shadow: -60px 100px 60px rgba(0, 0, 0, 0.5);} .box:before{ content: ''; position: absolute; top: 0px; left: -20px; height: 100%; width...
Post a Comment
Read more

Image Effects Pink

Image
<!DOCTYPE html> <html lang="eng"> <head> <title>Hover Effect</title> </head> <body> <div class="container"> <div class="card"> <div class="face face1"> <div class="content"> <img src="image.png"> <h3>Web Deisgn</h3> </div> </div> <div class="face face2"> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqu</p> <a href="#">Read More</a> </div> </div> </div> <div class="card"> <div class="face face1"> <div class="content"> <img src="image.png"> <h3>Web Deisgn</h3> </div...
Post a Comment
Read more

Hover Button Effects

Image
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <a href="#">Button <span></span> <span></span> <span></span> <span></span> </a> <style type="text/css"> body{ margin: 0px; padding: 0px; display: flex; justify-content: center; align-items: center; height: 100vh; font-family: sans-serif; background-color: #000; } a{ position: absolute; display: block; padding: 20px 40px; text-transform: uppercase; text-decoration: none; color: #fff; font-size: 24px; letter-spacing: 2px; overflow: hidden; } a:before{ content: ''; position: absolute; width: 100%; height: 100%; top: 0px; left: -100%; background: #fff; transition: 0.5s; transition-delay: 0.5s; } a:hover:before{ left: 100%; } a span:nth-child(odd){ position: absolut...
Post a Comment
Read more

Hover Effects

Image
<div class="box">                 <img src="images/light-Illuminator.jpg">                 <div class="box-content">                     <div class="content">                                                 <span class="post">Light Illuminator</span>                         <ul class="icon">                                                     <li><a href="#"><i class="fa fa-link"></i></a></li>                     ...
Post a Comment
Read more

Navigation

Image
<!-- sticky --> <section class =" sticky-head "> <div class =" container "> <div class =" row "> <div class =" col-lg-3 col-md-3 col-sm-3 col-xs-12 logo wow fadeInLeft "> <a href =" / "> <img src =" images/ratanpara-overseas-logo.png " alt =" Ratanpara Overseas " title =" Ratanpara Overseas "> </a> </div> <div class =" col-lg-9 col-md-9 col-sm-9 col-xs-12 nav "> <div class =" mobile-nav-menu "> </div> <div class =" nav-menu "> <div class =" menu "> <nav id =" main-menu " class =" main-menu " style =" display: block; "> <ul> <li class =" active "> <a href =" / " title =" Home "> Home </a> </li> <li> <a href =...
Post a Comment
Read more