Posts

Showing posts from June, 2019

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

Water Animation

Image
<!DOCTYPE html> <html> <head> <title> Water </title> </head> <body> <div class =" loader "> <h1> Water </h1> </div> <style type =" text/css "> body{ margin: 0px; padding: 0px; background: #262626; font-family: arial; } .loader{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .loader h1{ margin: 0px; padding: 0px; text-transform: uppercase; font-size: 10em; color: rgb(255,255,255, .1); background-image: url(https://images.freecreatives.com/wp-content/uploads/2016/07/water-vector.jpg); background-repeat: repeat-x; -webkit-background-clip:text !important; animation: animate 15s linear infinite; } @keyframes animate{ 0%{ background-position: left 0px top 80px; } 40%{ background-position: left 800px top -50px; } 80%{ background-position: left 1800px top -50px; ...
Post a Comment
Read more

Background Slow Hover Content

Image
<!DOCTYPE html> <html> <head> <title>Slider</title> </head> <body> <div class="container"> <div class="circle circle1"> <div class="content"> <h1>Hello</h1> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </div> <div class="circle circle2"> <div class="content...
Post a Comment
Read more

Gradient Background Animation

Image
<!DOCTYPE html> <html> <head> <title>Gradeint</title> </head> <body> <div class="text"> Gradient Background Animation </div> <style type="text/css"> body{ margin: 0px; padding: 0px; font-family: arial; background-image: linear-gradient(125deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad); background-size: 400%; animation: bganimation 15s infinite; } .text{color: white; text-align: center; text-transform: uppercase;margin: 350px 0; font-size: 22px;} @keyframes bganimation{ 0%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } 100%{ background-position: 0% 50%; } } </style> </body> </html>
Post a Comment
Read more

Clip Path Hover Effects

Image
<!DOCTYPE html> <html> <head> <title>Box</title> </head> <body> <!-- https://bennettfeely.com/clippy/ --> <div class="box"> <div class="content"> <div> <h2>Image hover Effects</h2> <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <a href="#">Read More</a> </div> </div> <img src="full-img.jpg"> </div> </div> <style type="text/css"> body{ margin: 0px; padding: 0px; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .box{position: relative; width: 400px; height: 400px; background: #000;} .content{position: absolute; top:0px; left: 0px; righ...
Post a Comment
Read more