Posts

Showing posts from July, 2019

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