Sanwebcorner | Programming Blog

Auto 3d rotate gallery image using pure css

In this topic will see how to create auto rotate 3D images with the help of pure css. This is one of the simple concept and easy to create we can use it to the gallery page for better view for the images. And also this is very attractive animation effect with pure css. Now will see how to create this effect.This concept is to rotate multiple images in the 3d effect without using any jquery and javascript. This will done by using pure css3 code. and we can use n number of images to in this concept by reducing the transform deg.

For carousel id we can set the following important css3 code like below to animate rotate effect
transform-style: preserve-3d;
animation: rotation 20s infinite linear;

Then set the transform degree for each image with 40 degree difference between each images like below
#carousel figure:nth-child(1) {transform: rotateY(0deg) translateZ(288px);}
#carousel figure:nth-child(2) { transform: rotateY(40deg) translateZ(288px);}
#carousel figure:nth-child(3) { transform: rotateY(80deg) translateZ(288px);}
#carousel figure:nth-child(4) { transform: rotateY(120deg) translateZ(288px);}
#carousel figure:nth-child(5) { transform: rotateY(160deg) translateZ(288px);}
#carousel figure:nth-child(6) { transform: rotateY(200deg) translateZ(288px);}
#carousel figure:nth-child(7) { transform: rotateY(240deg) translateZ(288px);}
#carousel figure:nth-child(8) { transform: rotateY(280deg) translateZ(288px);}
#carousel figure:nth-child(9) { transform: rotateY(320deg) translateZ(288px);}
#carousel figure:nth-child(10){ transform: rotateY(360deg)translateZ(288px);}

then set the keyframe rotation from 0deg to 360deg . This all are very important points to be noted. Please check the below demopage to view the auto rotate 3d gallery images. And download the code from here and use it to your website. We can use this types of animation in gallery pages for our website. I hope this is very useful to you. 


Css for 3d rotate image:

.gallery{
margin: 4% auto;
width: 210px;
height: 140px;
position: relative;
perspective: 1000px;
}
#carousel{
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
animation: rotation 20s infinite linear;
}
#carousel:hover{
animation-play-state: paused;
}
#carousel figure{
display: block;
position: absolute;
width: 90%;
height: 78%;
left: 10px;
top: 10px;
background: black;
overflow: hidden;
border: solid 5px black;
}
#carousel figure:nth-child(1) {transform: rotateY(0deg) translateZ(288px);}
#carousel figure:nth-child(2) { transform: rotateY(40deg) translateZ(288px);}
#carousel figure:nth-child(3) { transform: rotateY(80deg) translateZ(288px);}
#carousel figure:nth-child(4) { transform: rotateY(120deg) translateZ(288px);}
#carousel figure:nth-child(5) { transform: rotateY(160deg) translateZ(288px);}
#carousel figure:nth-child(6) { transform: rotateY(200deg) translateZ(288px);}
#carousel figure:nth-child(7) { transform: rotateY(240deg) translateZ(288px);}
#carousel figure:nth-child(8) { transform: rotateY(280deg) translateZ(288px);}
#carousel figure:nth-child(9) { transform: rotateY(320deg) translateZ(288px);}
#carousel figure:nth-child(10){ transform: rotateY(360deg)translateZ(288px);}
#carousel img{
-webkit-filter: grayscale(1);
cursor: pointer;
transition: all .5s ease;
width:100%;
}
#carousel img:hover{
-webkit-filter: grayscale(0);
transform: scale(1.2,1.2);
}

@keyframes rotation{
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(360deg);
}
}

Html code for 3d rotate image gallery:

<body>
<div class="div-center gallery">
<div id="carousel">
<figure><img src="p1.jpg" alt=""></figure>
<figure><img src="p2.jpg" alt=""></figure>
<figure><img src="p3.jpg" alt=""></figure>
<figure><img src="p4.jpg" alt=""></figure>
<figure><img src="p5.jpg" alt=""></figure>
<figure><img src="p6.jpg" alt=""></figure>
<figure><img src="p1.jpg" alt=""></figure>
<figure><img src="p2.jpg" alt=""></figure>
<figure><img src="p3.jpg" alt=""></figure>
<figure><img src="p4.jpg" alt=""></figure>
</div>
</div>
</body>

How to create 3(three) step registration form with JavaScript validation

This post helps you how to create simple and perfect 3 step form with Javscript validation using Css3 and Html.Now a days 3 step form is commonly used form in the webpages because it is very attractive one for the customers because it helps no need to scroll down for the bigger type forms. And also 3 step form is captured the information by the categories, And also this from contains the Progress bar in the top of the form it will done by using css3 and Jquery for user reference.

This simple attractive form will done by using css3 and html and validation purpose we used the JavaScript. The form is processed the validation step by step by clicking the next button. Here have a final step to verify the all of your form contents with your data. You can customize this form according to your project. I hope this tutorial  is very useful for the developers.


In this example i used the name, email and country in the first step if you clicked next button without any data you will get the validation error like the below screenshot.In the next step is username and password and confirmation password is given with JavaScript validation, the third step is verification step is to display all your Datas from the form.

This multiple step form is the responsive form it will fit all the device because its done by using bootstrap and html . This multi step form is used to reduce the webpage space as well the user attraction. The below example have the codes and demo page. Check the below demo page for your better understanding of this Three(3) Level form with validation.

multi-step-form-with-validation


Html Code Three step form with Validation:

<div class="container">
<br><br>
<form class="form-horizontal form">
<div class="col-md-8 col-md-offset-2">  
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="box row-fluid">
<br>
<div class="step">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" name="name" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="text" name="email" class="form-control" id="email" placeholder="email">
</div>
</div>
<div class="form-group">
<label for="country" class="col-sm-2 control-label">Country</label>
<div class="col-sm-10">
<select class="form-control" name="country" id="country">
<option value="">Select</option>
<option value="India">India</option>
<option value="Australia">Australia</option>
<option value="USA">USA</option>
<option value="Japan">Japan</option>
<option value="Singapore">Singapore</option>
<option value="Malaysia">Malaysia</option>
</select>
</div>
</div>
</div>
<div class="step">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">Username</label>
<div class="col-sm-10">
<input type="text" name="username" value="" class="form-control" id="username" placeholder="Username">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" name="password" value="" class="form-control" id="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="rpassword" class="col-sm-2 control-label">Retype Password</label>
<div class="col-sm-10">
<input type="password" name="rpassword" class="form-control" id="rpassword" placeholder="Retype password">
</div>
</div>  
</div>
<div class="step display">
<h4>Confirm Details</h4>
<div class="form-group">
<label class="col-sm-2 control-label">Name :</label>
<label class="col-md-10 control-label lbl" data-id="name"></label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Email :</label>
<label class="col-md-10 control-label lbl" data-id="email"></label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Country :</label>
<label class="col-md-10 control-label lbl" data-id="country"></label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Username :</label>
<label class="col-md-10 control-label lbl" data-id="username"></label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Password :</label>
<label class="col-md-10 control-label lbl" data-id="password"></label>
</div>
</div>

<div class="row">
<div class="col-sm-12">
<div class="pull-right">
<button type="button" class="action btn-sky text-capitalize back btn">Back</button>
<button type="button" class="action btn-sky text-capitalize next btn">Next</button>
<button type="button" class="action btn-hot text-capitalize submit btn">Submit</button>
</div>
</div>
</div>

</div>
<a style="color:#fff; float:right;" href="http://www.sanwebcorner.com/"><h3>www.sanwebcorner.com</h3></a>
</div>
</form>
</div>

Javascript for 3 step form with validation:

<script type="text/javascript">
$(document).ready(function(){
var current = 1;

widget      = $(".step");
btnnext     = $(".next");
btnback     = $(".back"); 
btnsubmit   = $(".submit");

// Init buttons and UI
widget.not(':eq(0)').hide();
hideButtons(current);
setProgress(current);

// Next button click action
btnnext.click(function(){
if(current < widget.length){
// Check validation
if($(".form").valid()){
widget.show();
widget.not(':eq('+(current++)+')').hide();
setProgress(current);
}
}
hideButtons(current);
})

// Submit button click
btnsubmit.click(function(){
alert("Submit button clicked");
});


// Back button click action
btnback.click(function(){
if(current > 1){
current = current - 2;
if(current < widget.length){
widget.show();
widget.not(':eq('+(current++)+')').hide();
setProgress(current);
}
}
hideButtons(current);
})

$('.form').validate({ // initialize plugin
ignore:":not(:visible)",
rules: {
name     : "required",
email    : {required : true, email:true},
country  : "required",
username : "required",
password : "required",
rpassword: { required : true, equalTo: "#password"},
},
});

});

// Change progress bar action
setProgress = function(currstep){
var percent = parseFloat(100 / widget.length) * currstep;
percent = percent.toFixed();
$(".progress-bar").css("width",percent+"%").html(percent+"%");
}

// Hide buttons according to the current step
hideButtons = function(current){
var limit = parseInt(widget.length); 

$(".action").hide();

if(current < limit) btnnext.show();
if(current > 1) btnback.show();
if (current == limit) { 
// Show entered values
$(".display label.lbl").each(function(){
$(this).html($("#"+$(this).data("id")).val());
});
btnnext.hide(); 
btnsubmit.show();
}
}
</script>

Simple Countdown based on Date using JavaScript

This Post help you how to create countdown based on your given date. It automatically takes the countdown using date you are provided. It displays the years, months, days, hours, minutes and seconds. It is very useful display the counter for the event launching and any other new product launching system.This countdown display with animation countdown cube.If you don't want display some fields like years then you should remove the fields in JavaScript. You can able to change the time zone in the below javscript code i am using here Asia/Kolkata the default time zone is UTC, It will convert the utc to Asia/Kolkata. This concept is build with given end time, It automatically calculated the years, months, days, hours, minutes, seconds and display the results in the cube div.



The below html code is used to display the full countdown
<div id='counter' class='counter'></div>
And the countdowncube.css file used design the counter boxes in a perfect manner you can able to change the styles and colors according to your choice to edit the countdowncube.css file. and the countdowncube.js have the javascripts to display the counter you can edit and customize the counters according to your choice.

I hope this simple concept is very useful to you. This example have the demo page please check out the demo page and download the full code and use it to your website.

Countdown based on given date:

<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Simple Countdown based on Date using Jquery</title>
<meta name="description" content="Personal Website of Ali Cigari, jack of all trades...">
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<link rel="stylesheet" href="countdowncube.css">
<style class="inlinestyle">
.counter {
margin: 10 auto;
text-align: center;
}
body
{
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div id='counter' class='counter'></div>

<script src="countdowncube.js"></script>
<script>
var targetDate = new Date();
targetDate.setMonth(targetDate.getMonth() + 18)
targetDate.setDate(1)
targetDate.setHours(11)
targetDate.setMinutes(0)
targetDate.setSeconds(0)
targetDate.setMilliseconds(0);

var targetDateStringUTC = targetDate.toISOString()
.replace(':00.000', '');
var targetDateString = targetDateStringUTC.replace('Z', '');

var targetLADate = moment.tz(targetDateStringUTC,
'Asia/Kolkata').format();
var tzLAOffset = targetLADate.substr(-6);
var targetDateStringOffset = targetDateString.replace('Z', '')
.replace(':00.000', '') +
tzLAOffset;

var tzOldFormatOffset = targetDateString.substr(-5);
var targetDateOldFormatString = targetDate.toLocaleDateString() +
' ' + tzOldFormatOffset;

var pastDate = new Date();
pastDate.setMonth(targetDate.getMonth() - 18)
pastDate.setMinutes(0);
pastDate.setSeconds(0);
pastDate.setMilliseconds(0);
var targetDateStringPast = pastDate.toISOString()
.replace(':00.000', '');
var nearFutureDate = new Date();
nearFutureDate.setSeconds(nearFutureDate.getSeconds() + 10);
nearFutureDate.setMilliseconds(0);
var nearFutureDateString = nearFutureDate.toISOString()
function reloadCounter(element_id,
new_target,
targetTimezone,
cubeSize,
background,
color,
onEnd,
triggerEnd) {

$(element_id).empty();

$(element_id).countdownCube( {
target: new_target,
targetTimezone: targetTimezone,
cubeSize: cubeSize,
background:  background,
color: color,
onEnd: onEnd,
triggerEnd: triggerEnd,
} );
};
</script>
<script>
$('#counter').countdownCube( {
target: targetDateStringUTC,
cubeSize: 150,
background:  '#ffff00',
color: 'blue',
} );

$('#counter-end-notrigger').countdownCube( {
target: targetDateStringPast,
targetTimezone: 'UTC',
cubeSize: 150,
background:  'lightcyan',
color: 'darkcyan',
/*
target is in the past and triggerEnd is false,
so onEnd is not triggered when the page is loaded
*/
onEnd: function(e) {
$("#counter-end-notrigger")
.text('This was the end, but it was not triggered! ' +
'(counter original target: ' +
e.options.targetDateObject.toISOString() +
')');
}
} );
$('#counter-end-trigger').countdownCube( {
target: targetDateStringPast,
targetTimezone: 'UTC',
cubeSize: 150,
background:  'lightcyan',
color: 'cyan',
onEnd: function(e) {
$("#counter-end-trigger")
.text('This was the end and it was triggered! ' +
'(counter original target: ' +
e.options.targetDateObject.toISOString() +
')');
},
triggerEnd: true,
} );

$('#counter').countdownCube({
target: new Date( 'Feb 10, 2018 7:47:00' ),
cubeSize: 50
});
</script>
</body>
</html>

Test your Password Strength using Jquery

To show the password strength to the customer is one of the important concept, because the user will know  how strong our password and it helps to reset the password when the password is poor. The password is one of the very important field to access their profile so the password should be strong so we need to set the strong password. In the below example have the two different strength validation. 

In the first example the strength meter is in below text box it shows how the password strength. It changes the red color when password is poor and also display the text like your password is too weak.when password is four to eight character it shows the message "Could be stronger" and color is yellow. And the password is above 8 character it shows "password is strong" message and color changes as green.

In the second example same text will display like the above example but there is no strength meter in this instead of this meter it changes the border color of the password text field dynamically based on the password strength 

Here i did the validation using character you can set the password validation using combination of the characters and the numbers and special characters by changing the script validation. Check the below example demo page to see the like demo of the below example. I hope this concept is very useful. 


Code for test Password strength:

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Password strength Indicator using Jquery</title>
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Password strength Validation Option1:</h1>
<div class="form-container">
<form class="form-1" action="">
<label>Enter password</label>
<input class="input-1" type="password" placeholder="&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;">
<div class="progress-bar_wrap">
<div class="progress-bar_item progress-bar_item-1"></div>
<div class="progress-bar_item progress-bar_item-2"></div>
<div class="progress-bar_item progress-bar_item-3"></div>
</div>
<span class="progress-bar_text">Password is blank</span>
</form>
</div>
<h1>Password strength Validation Option2:</h1>
<div class="form-container">
<form class="form-4" action="">
<label>Enter password</label>
<input class="input-4" type="password" placeholder="&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;">
<span class="progress-bar_text">Password is blank</span>
</form>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script  src="js/index.js"></script>
</body>
</html>

Validate File size While Upload with the help of Javascript

This post shows how to validate the file while upload the data. While uploading the data it checks the validation like the file size should be less then 2MB and you also validate  the format of the file. Here i checking the file size should be less then 2MB. If the size should be more than 2mb it shows the error "File size is grater than 2mb.Please upload the file below 2mb." Like that.

This is the script to validate the file while upload:

<script>
function validate() {
$("#file_error").html("");
$(".inputbox1").css("border-color","#F0F0F0");
var file_size = $('#file')[0].files[0].size;
if(file_size>2097152) {
$("#file_error").html("File size is greater than 2MB. Please upload file below 2MB.");
$(".inputbox1").css("border-color","#FF0000");
return false;
return true;
}
</script>

It showing red border in the text box and given the error message below the text box  when validation error occurs. Please Check the demo page to check this example. This is one of the very useful concept for the programmers. I hope this is very useful.

Code for Validate File on Upload:

<html>
<head>
<style>
#filesizeval {width:500px; margin:0 auto;    border: #050505 2px solid;
background: #F1F0F0;padding:80px; }
.inputbox1{
padding:10px;    
margin: 0 auto;display: 
block;     
border: 1px solid #A39F9F; 
border-radius:4px;
background-color:#FFF;
}
#file_error
{
color: #FF0000;
}
#button
{
background-color:#2FC332;
margin: 23px auto;
display: block; 
border:0;
padding:10px 40px; 
color:#FFF;
border:#F0F0F0 1px solid; 
border-radius:4px;
}
</style>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script>
function validate() {
$("#file_error").html("");
$(".inputbox1").css("border-color","#F0F0F0");
var file_size = $('#file')[0].files[0].size;
if(file_size>2097152) {
$("#file_error").html("File size is greater than 2MB. Please upload file below 2MB.");
$(".inputbox1").css("border-color","#FF0000");
return false;
return true;
}
</script>
</head>
<body>
<form name="filesizeval" id="filesizeval" method="post" action=""  onSubmit="return validate();">
<div><input type="file" name="file" id="file" class="inputbox1" /> <br/><center><span id="file_error"></span></center></div>
<div><input type="submit" id="button" value="Upload"/></div><br/><br/>
<center><a style="color: #000; font-weight: bold; font-size: 17px;" href="http://www.sanwebcorner.com">www.sanwebcorner.com</a></center>
</form>
</body>
</html>

Full Screen Menu using pure css3

In this post we are going to see how to create full screen  menu using only css code. This is very simple concept to display menu in full screen mode, This is also like mobile toggle menu. Now a days all are want different types of designing concept in websites. This menu one of the different menu concept for websites. This menu contains the three bar in the right side corner when you click that particular menu it hiding the all home page contents and displays the menus. When you want to close the menu you should click the right corner close icon.

Now a days this type of common menu is using in the websites. This is also one of the user friendly. This menu fully done by using pure css3 code, Without any help of javascript and jquery. I hope this example is very useful for the developers. Here we have the demo page, Please check out the demo page in the below link. 


Html Code for Full Screen Menu:

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Full Screen Menu using Css3 | sanwebcorner.com</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<label>
<input type='checkbox'>
<span class='menu'>
<span class='fullmenu'></span>
</span>
<ul>
<li><a href='http://www.sanwebcorner.com/'>Home</a></li>
<li><a href='http://demos.sanwebcorner.com/'>Demo</a></li>
<li><a href='https://www.facebook.com/sanwebcorner/'>About</a></li>
</ul>
</label>
<h1>San Web Corner - Full Screen Menu using css</h1>
</body>
</html>


Css for Full Screen Navigation Bar:

*,
*:before,
*:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

html {
font-size: 18px;
}

body {
font-size: 1.2em;
line-height: 1.6;
background: #8BC34A;
overflow-x: hidden;
}

label .menu {
position: absolute;
right: -100px;
top: -100px;
z-index: 100;
width: 200px;
height: 200px;
background: #FFF;
border-radius: 50% 50% 50% 50%;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
-webkit-box-shadow: 0 0 0 0 #FFF, 0 0 0 0 #FFF;
box-shadow: 0 0 0 0 #FFF, 0 0 0 0 #FFF;
cursor: pointer;
}
label .fullmenu {
position: absolute;
top: 135px;
left: 50px;
width: 30px;
height: 2px;
background: #000;
display: block;
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
label .fullmenu:after, label .fullmenu:before {
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
content: "";
position: absolute;
display: block;
width: 100%;
height: 100%;
background: #000;
}
label .fullmenu:before {
top: -10px;
}
label .fullmenu:after {
bottom: -10px;
}
label input {
display: none;
}
label input:checked + .menu {
-webkit-box-shadow: 0 0 0 100vw #FFF, 0 0 0 100vh #FFF;
box-shadow: 0 0 0 100vw #FFF, 0 0 0 100vh #FFF;
border-radius: 0;
}
label input:checked + .menu .fullmenu {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
label input:checked + .menu .fullmenu:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
bottom: 0;
}
label input:checked + .menu .fullmenu:before {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
top: 0;
}
label input:checked + .menu + ul {
opacity: 1;
}
label ul {
z-index: 200;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
-webkit-transition: .25s 0s ease-in-out;
transition: .25s 0s ease-in-out;
}
label a {
margin-bottom: 1em;
display: block;
color: #000;
text-decoration: none;
}

h1 {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 80%;
text-align: center;
color:#fff;
}

Multi-Level Form with validation

This post helps you how to create simple and perfect Multi-level form with Javscript validation using Css3 and Html.Now a days Multi-Level form is commonly used form in the webpages because it is very attractive one for the customers because it helps no need to scroll down for the bigger type forms. And also multi-level form is captured the information by the categories, And also this from contains the Progress bar in the top of the form it will done by using css3 and Jquery for user reference.

This simple attractive form will done by using css3 and html and validation purpose we used the JavaScript. The form is processed the validation step by step by clicking the next button. Here have a final step to verify the all of your form contents with your data. You can customize this form according to your project. I hope this tutorial  is very useful for the developers.


In this example i used the name, email and country in the first step if you clicked next button without any data you will get the validation error like the below screenshot.In the next step is username and password and confirmation password is given with JavaScript validation, the third step is verification step is to display all your Datas from the form.

This multiple step form is the responsive form it will fit all the device because its done by using bootstrap and html . This multi step form is used to reduce the webpage space as well the user attraction. The below example have the codes and demo page. Check the below demo page for your better understanding of this Three(3) Level form with validation.

multi-step-form-with-validation


Html Code Multi-Step form with Validation:

<div class="container">
<br><br>
<form class="form-horizontal form">
<div class="col-md-8 col-md-offset-2">  
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="box row-fluid">
<br>
<div class="step">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" name="name" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="text" name="email" class="form-control" id="email" placeholder="email">
</div>
</div>
<div class="form-group">
<label for="country" class="col-sm-2 control-label">Country</label>
<div class="col-sm-10">
<select class="form-control" name="country" id="country">
<option value="">Select</option>
<option value="India">India</option>
<option value="Australia">Australia</option>
<option value="USA">USA</option>
<option value="Japan">Japan</option>
<option value="Singapore">Singapore</option>
<option value="Malaysia">Malaysia</option>
</select>
</div>
</div>
</div>
<div class="step">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">Username</label>
<div class="col-sm-10">
<input type="text" name="username" value="" class="form-control" id="username" placeholder="Username">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" name="password" value="" class="form-control" id="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="rpassword" class="col-sm-2 control-label">Retype Password</label>
<div class="col-sm-10">
<input type="password" name="rpassword" class="form-control" id="rpassword" placeholder="Retype password">
</div>
</div>  
</div>
<div class="step display">
<h4>Confirm Details</h4>
<div class="form-group">
<label class="col-sm-2 control-label">Name :</label>
<label class="col-md-10 control-label lbl" data-id="name"></label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Email :</label>
<label class="col-md-10 control-label lbl" data-id="email"></label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Country :</label>
<label class="col-md-10 control-label lbl" data-id="country"></label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Username :</label>
<label class="col-md-10 control-label lbl" data-id="username"></label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Password :</label>
<label class="col-md-10 control-label lbl" data-id="password"></label>
</div>
</div>

<div class="row">
<div class="col-sm-12">
<div class="pull-right">
<button type="button" class="action btn-sky text-capitalize back btn">Back</button>
<button type="button" class="action btn-sky text-capitalize next btn">Next</button>
<button type="button" class="action btn-hot text-capitalize submit btn">Submit</button>
</div>
</div>
</div>

</div>
<a style="color:#fff; float:right;" href="http://www.sanwebcorner.com/"><h3>www.sanwebcorner.com</h3></a>
</div>
</form>
</div>

Javascript for Multi-level form with validation:

<script type="text/javascript">
$(document).ready(function(){
var current = 1;

widget      = $(".step");
btnnext     = $(".next");
btnback     = $(".back"); 
btnsubmit   = $(".submit");

// Init buttons and UI
widget.not(':eq(0)').hide();
hideButtons(current);
setProgress(current);

// Next button click action
btnnext.click(function(){
if(current < widget.length){
// Check validation
if($(".form").valid()){
widget.show();
widget.not(':eq('+(current++)+')').hide();
setProgress(current);
}
}
hideButtons(current);
})

// Submit button click
btnsubmit.click(function(){
alert("Submit button clicked");
});


// Back button click action
btnback.click(function(){
if(current > 1){
current = current - 2;
if(current < widget.length){
widget.show();
widget.not(':eq('+(current++)+')').hide();
setProgress(current);
}
}
hideButtons(current);
})

$('.form').validate({ // initialize plugin
ignore:":not(:visible)",
rules: {
name     : "required",
email    : {required : true, email:true},
country  : "required",
username : "required",
password : "required",
rpassword: { required : true, equalTo: "#password"},
},
});

});

// Change progress bar action
setProgress = function(currstep){
var percent = parseFloat(100 / widget.length) * currstep;
percent = percent.toFixed();
$(".progress-bar").css("width",percent+"%").html(percent+"%");
}

// Hide buttons according to the current step
hideButtons = function(current){
var limit = parseInt(widget.length); 

$(".action").hide();

if(current < limit) btnnext.show();
if(current > 1) btnback.show();
if (current == limit) { 
// Show entered values
$(".display label.lbl").each(function(){
$(this).html($("#"+$(this).data("id")).val());
});
btnnext.hide(); 
btnsubmit.show();
}
}
</script>

Light glowing effect using pure css3


All the website contains the social pages links through the social icons. We need to display the social links to increase our website traffic and to see our latest updates in social pages like Facebook, twitter, Instagram, google plus etc..., So we need to highlight the social icons in our website. There are different types of effects in css to animate the social icons on hover. This light glowing is one of the better effect to highlight the social icons.

Select Multiple value from select box with check box

This is another important concept to select the multiple value from one select box with the help of check box using jquery. Commonly we will select one value from the <select> box , It shows only option values from the select box like a dropdown list.  Some times we need to get multiple value from the select box so that kind of  places we need to use Jquery and css concept. Here is the solution to get more then one value from the select box

20 Simple Css Hover Effect for image

1. Zoom In Effect:

we will do the lot of animation effects in your websites using the simple css3 codes , Here we will see how to create the zoom in effect on hover the image using the css3 transition and scaling the image. You can grow an image and shrink on mouse hover. Every websites needs minimum animation effects to attract the customers.



Now a days css3 animation is working better then the js animations.CSS transitions, which are part of the CSS3 set of specifications, provide a way to control animation speed when changing CSS properties.

2. Right Zoom In Effect:

This is another type of zoom in effect. This effect is something different from normal zoom in effect, This types of hover effect is commonly used one. Because this is zoom in from right hand side. You can see the below live demo for this effect. 

This effect will done using simple css3 code transition properties and you just increase the width of the image on mouse hover. This example haves the full code and demo check it out. you can use this effect to your webpages.                                                                                                  

3. Shadow Effect :

This post helps you to create shadow effect to particular image using css3 code. This is very simple method to create this effect and also it will highlight the user hover the image, this effect also one of the commenly used one. The below css code helps you to create shadow, Add the class to the image and write the css code for class hover as a below

.shadow:hover
{
box-shadow: 10px 10px 30px 5px #aaa;
}


Here you have the demo page you can also check the demo page how it works perfectly. I hope this simple box shadow effect  is very useful.


4. Zoom Out Effect:

The another interesting hover effect is Zoom out effect. This animated effects will done by using simple css3 code. Below is the simple example shows the how zoomout effects will works. Here is the live demo, take the live demo page and see how it is working. 



The image hover effect is very very important to highlight the image when hover. It is very useful to the gallery page and product pages, service pages etc... Here i will provided the code for zoomout effect animation code on hover the image. I hope this is very useful for your website. I will post another effect in next post.


5. Right Zoom out Effect:

This is another type of zoom out effect. This effect is something different from normal zoom out effect, This types of hover effect is commonly used one. Because this is zoom out from right hand side. You can see the below live demo for this effect. This effect will done using simple css3 code transition properties and you just decrease the width of the image on mouse hover. 
This example haves the full code and demo check it out. you can use this effect to your webpages. I hope this hover effect is very useful to you.


6. Simple Border Effect:

This is one of the simple effect with simple css code. Simply highlight the image using border you can use this one line code on hover the image. Just call one class to the particular image and write the code for class hover as a border :3px solid #000; 
you can choose any other colors and border width as you want. this type of hover effect will highlight the image and this will useful for the gallery page as well.


7. Slide Effect:

Slide effect is another animation effect, We can use it for image hover this types of effect will done by using the simple css3 code and this also commonly used animation effect. This image hover will done by using a small trick that is to increase the margin left for the image and decrease the margin-left on hover the image using some of the simple css3 transition  and transform codes.
We always use the different types of image hover effect to attract the customers. So this is one of the image hover effect, This example have the demo page and full code you may be download and use it to your webpages. I hope this will very useful animation code.


8. Rotate Effect:

Rotate Effect is one of the simple effect. It will done by using css3.  we will do the lot of animation effects in your websites using the simple css3 codes , Here we will see how to create the simple Rotate effect  on hover the image using the css3. Every websites needs minimum animation effects to attract the customers.

This rotate effect is one of the best attracting animation. Below is the simple css3 code to rotate an image on mouse hover. This is done by the css transform properties. Here is the live demo to see the rotate effect


9. Image Overlay Effect:

In this example i show you how to create simple overlay effect with caption animation , The caption animation will comes from different  sides like left, right, top, bottom, top left, top right, bottom left and bottom right. You can able to see this caption animation along with the image overlay effect in the demo page. 



Please click the demo link below and check this example. The overlay effect i used in black color you may change the background color according to your wish. Check out the below simple html and css code for this effect. I hope this post is very useful.

10. Shining Effect:


Shining Effect is one of the different effect this animation will done by using the simple css3 animation code. Here the shining effect will done on hover the image. There are several types of image hover effect is there but this is one of the nice effect. 

This example have the demo and full code for this shining effect, I hope this simple animation effect will useful to your projects.


11. Gray Scale Effect:

This is an another css3 effect. It will done by simple css code filter properties. On hover the image it shows the color picture and when you mouse out from the image it shows the gray scale image. You can filter any types image in to gray scale image using css3 filter option. The below code helps you to filter the image.


-webkit-filter: grayscale(100%);
filter: grayscale(100%);
the above code is display the image in black and white. when you set the filter:grayscale(0%) again the image color turned the original color. Here is the full code and live demo available in the below example for your better understanding. I hope this post is very useful.

12. Opacity Effect:

This css effect is commonly used hover effect. Reduce the opacity of the image on hover the particular image this will done by using the simple css code. opacity: .5; You may reduce the opacity .4,.6 like that according to your choice. 
Below example have the sample codes and demos please check it was very useful for beginners


13. Opacity with Background Color:

Opacity reduce effect is one of the commonly used animation effect on hover the image. you can reduce the image opacity on hover using simple css3 code. Here this effect some thing different you can reduce the opacity for the background color. In this effect you can visible the image with background overlay.
This is very simple you can follow the below css code. The below image shows how the background image opacity is looks for. Visit the below demo link for better understanding of this hover effect.



14. Morphing Effect:

Morphing is a special and simple effect in pictures to change the one shape to another shape. Here i will tell you how to create simple morphing effect using the css3 code. This below example i will show you how to create the rectangle type image to circle type image with the help of Css like below diagram. use the transition: all 0.5s ease; css properties  to change the image shape smooth manner.


Just change the border-radius:50%; to change the image shape. This is very easy to create i hope this example is very useful. This example have the source code and demo page, Please check out the demo page for this morphing effect. 



15. Flash Effect: 

Before this we seen lot of  css3 hover effect. Flash Effect is a another nice css3 effect, Now we can see how to use this css3 effect on hover the image. When we compare to another effect it is the better one. 


This animation effect will done using the simple css3 code. Below example shows the flash animation effect, here is the full css code and also provided live demo for your better understanding.

16. Sepia Effect:

The sepia is one of the image effect, this effect contains little yellow this is just opposite of the black and white photo. Sepia is a reddish-brown color, named after the rich brown pigment derived from the ink sac of the common cuttlefish Sepia.



Now i will tell you how to filter your color picture to sepia toned picture with the help of css3 filter. The below css3 code helps to filter the color to sepia image
-webkit-filter: sepia(0);
filter: sepia(0);

This is also commonly used image effect for hover. This example have the demo page and source code for this sepia effect. I hope this will very useful.

17. Blur with Gray Scale Effect: 


This is one of the interesting hover effect to show the gray scale with blur on hover the image with the help of the simple css3 code. Every gallery or product based images need to be some hover effect to attract the customers. The below image shows you to provide the hover effect with grayscale blur animation.

Here is the demo page and the full code to better understand this effect. I hope this is very useful , we will see the next effect in another post.

18. Blur Effect:

Now a days css3 animation is working better then the js animations. we will do the lot of animation effects in your websites using the simple css3 codes , Here we will see how to create the simple blur in effect on hover the image using the css3 filter to the image. Every websites needs minimum animation effects to attract the customers.


.hover07 figure img {
-webkit-filter: blur(3px);
filter: blur(3px);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover07 figure:hover img {
-webkit-filter: blur(0);
filter: blur(0);
}

The above set of css3 code is used to blur the image on mouse hover . I provided the html and css code for creating the Blur effect on image hover. Blur image on mouse hover can be created using CSS3 filter. This tutorial is very easy and this effect can be easily created using few lines of above code. Here i provided the demo page and code for this simple zoom in effect. I hope this is very useful  will see the another css3 effect next post.



19. Circle Shining Effect:

Circle shining effect is on of the effect done by using simple css3 code. The shine effect is in the way of circle and this is also called as a wave effect on hover the image. This is one of the simple and attractive css3 effect. 

The below example helps you to create this effect, Here i provided the live demo and code for this effect for better understanding.



20. Focus Effect:

Focus effect is one of the nice css3 hover effect, The Css3 code is used to create this effect without any JavaScript and jquery help. The focus animation effect is easily attract the website visitors and also highlight the image perfectly. Now will see how to create this simple hover effect with the help of css.

transition: all 1s ease; this code helps you to change the property values smoothly  and on hover to set the border: 70px solid #000; border-radius: 50%; to focus the picture. using the below simple css3 code you can achive this simple focus effect. Here also have the demo page please check it out and download the code if you want. I hope this example is useful to you.