Black and White color on hover effect for picture


/* This is for html file

<div class="image-1">
	<img src="<?php echo $this->getSkinUrl('images/product1.jpg');?>" />
</div>

*/

.image-1 {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'800\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
    -webkit-transition: all 0.5s ease;
       -moz-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
         -o-transition: all 0.5s ease;
            transition: all 0.5s ease;
}

.image-1:hover {
 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'800\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}

/* example westects site */
Advertisements

CSS3 Tooltip

/* Tooltip hover effect for wishlist start */

.wishlist_div .add-to-links a{
    position: relative;
    display: inline-block;
    
}
.wishlist_div .add-to-links a:before {
    visibility: visible;
    content: "ADDED TO WISHLIST";
    font-size: 9px;
    text-transform: none;
    position: absolute;
    width: 108px;
    background-color: #a41103;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    z-index: 1;
    top: 131%;
    right: -216%;
    line-height: 20px;
    transition: opacity 1s;
    font-family: opsemi;
}
.wishlist_div .add-to-links a:after {
    content: "";
    position: absolute;
    top: 13px;
    right: 0px;
    margin-left: 0px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #a41103 transparent;
   
    
} 
/* Tooltip hover effect for wishlist end */


/*
* if you want to change tooltip small icon different angle.just change this line:

up: border-color: transparent transparent #a41103 transparent;
down: border-color: #e74c3c transparent transparent transparent;
left: border-color:  transparent #a41103 transparent transparent;
left: border-color:  transparent transparent transparent #a41103;

*/

Shown as following example:
tooltrip-

Browser specific CSS rules

|| Google Chrome (version 28+):

@supports (-webkit-appearance:none) {
    nav.tm_navbar {
        background: green;
    }
}       

|| Mozilla Firefox (all versions):

_:-moz-tree-row(hover), nav.tm_navbar {
    background: red;
}       


|| Internet Explorer (version 10+):

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    nav.tm_navbar {
        background: blue;
    }
}     

css3 Vertical Menu

1.html

<html>
    <head>
        <title>Dropdown menu</title>
    </head>
    <body>
        <div id="menu">
            <ul>
                <li><a href="javascript:;" class="link_newproduct">Home</a></li>
                <li><a href="javascript:;">Womens wear</a>
                    <ul>
                        <li><a href="javascript:;">SHAREE</a></li>
                        <li><a href="javascript:;">KAMIZ</a></li>
                        <li><a href="javascript:;">STICHED DRESS</a></li>
                        <li><a href="javascript:;">KURTA</a></li>
                        <li><a href="javascript:;">UNSTICHED DRESS</a></li>
                        <li><a href="javascript:;">PANJABEE</a></li>
                        <li><a href="javascript:;">FATUA</a></li>
                    </ul>
                </li>
                <li><a href="javascript:;">Mens wear</a>
                    <ul>
                        <li><a href="javascript:;">Shirt</a></li>
                        <li><a href="javascript:;">Pant</a></li>
                        <li><a href="javascript:;">FATUA</a></li>
                        <li><a href="javascript:;">T-Shirt</a></li>
                    </ul>
                </li>
                <li><a href="javascript:;">Girls wear</a>
                    <ul>
                        <li><a href="javascript:;">KAMIZ</a></li>
                        <li><a href="javascript:;">STICHED DRESS</a></li>
                        <li><a href="javascript:;">FATUA</a></li>
                        <li><a href="javascript:;">SHAREE</a></li>
                    </ul>
 
                </li>
                <li><a href="javascript:;">West rang</a>
                    <ul>
                        <li><a href="javascript:;">Kamiz</a></li>
                        <li><a href="javascript:;">T-shirt</a></li>
                        <li><a href="javascript:;">Shirt</a></li>
                        <li><a href="javascript:;">Panjabee</a></li>
 
                    </ul>
                </li>
            </ul>
        </div>
    </body>
</html>

2.css

#menu {
  border-bottom: 1px solid #ff9a02;
  border-top: 1px solid #ff9a02;
  float: left;
  background: #FFC107;
}

#menu ul {
  margin: 0;
  padding: 0;
}

#menu li {
  list-style: none outside none;
  padding: 0;
  position: relative;
  border-right: 1px solid #FFEB00;
}

#menu ul li:hover ul {
  visibility: visible;
}

#menu ul li ul {
  position: absolute;
  visibility: hidden;
  background: none repeat scroll 0 0 #FFC107;
  z-index: 9999999;
  padding: 0;
  top: 26%;
  left: 102%
}

#menu li a {
  color: #AF1D1D;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  letter-spacing: 1px;
  text-align: left;
  padding: 12px 17px;
  text-transform: uppercase;
  text-decoration: none;
}

#menu ul li ul li {
  border-bottom: 1px solid #fff;
}

#menu ul li ul li a {
  font-size: 12px !important;
  width: 145px;
  color: #000;
}

#menu ul li ul li a:hover {
  color: #fff;
}

Output:
vertical-menu

css3 Dropdown Menu

1.html

<html>
	<head>
		<title>Dropdown menu</title>
	</head>
	<body>
		<div id="menu">
			<ul>
				<li><a href="javascript:;" class="link_newproduct">Home</a></li>
				<li><a href="javascript:;">Womens wear</a>
					<ul>
						<li><a href="javascript:;">SHAREE</a></li>
						<li><a href="javascript:;">KAMIZ</a></li>
						<li><a href="javascript:;">STICHED DRESS</a></li>
						<li><a href="javascript:;">KURTA</a></li>
						<li><a href="javascript:;">UNSTICHED DRESS</a></li>
						<li><a href="javascript:;">PANJABEE</a></li>
						<li><a href="javascript:;">FATUA</a></li>
					</ul>
				</li>
				<li><a href="javascript:;">Mens wear</a>
					<ul>
						<li><a href="javascript:;">Shirt</a></li>
						<li><a href="javascript:;">Pant</a></li>
						<li><a href="javascript:;">FATUA</a></li>
						<li><a href="javascript:;">T-Shirt</a></li>
					</ul>
				</li>
				<li><a href="javascript:;">Girls wear</a>
					<ul>
						<li><a href="javascript:;">KAMIZ</a></li>
						<li><a href="javascript:;">STICHED DRESS</a></li>
						<li><a href="javascript:;">FATUA</a></li>
						<li><a href="javascript:;">SHAREE</a></li>
					</ul>

				</li>
				<li><a href="javascript:;">West rang</a>
					<ul>
						<li><a href="javascript:;">Kamiz</a></li>
						<li><a href="javascript:;">T-shirt</a></li>
						<li><a href="javascript:;">Shirt</a></li>
						<li><a href="javascript:;">Panjabee</a></li>

					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>

2.css

#menu {
  border-bottom: 1px solid #ff9a02;
  border-top: 1px solid #ff9a02;
  float: left;
  background: #FFC107;
}

#menu ul {
  margin: 0;
  padding: 0;
}

#menu li {
  float: left;
  list-style: none outside none;
  padding: 0;
  position: relative;
  border-right: 1px solid #FFEB00;
}

#menu ul li:hover ul {
  visibility: visible;
}

#menu ul li ul {
  position: absolute;
  visibility: hidden;
  background: none repeat scroll 0 0 #FFC107;
  z-index: 9999999;
  padding: 0;
}

#menu li a {
  color: #AF1D1D;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  letter-spacing: 1px;
  text-align: left;
  padding: 12px 17px;
  text-transform: uppercase;
  text-decoration: none;
}

#menu ul li ul li {
  border-bottom: 1px solid #fff;
}

#menu ul li ul li a {
  font-size: 12px !important;
  width: 145px;
  color: #000;
}

#menu ul li ul li a:hover {
  color: #fff;
}

Output:
dropdown-menu

Responsive Rules

<!--Quick Tip: Don't Forget the Viewport Meta Tag-->
<!--location head or header -->
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- responsive start -->

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

<!-- responsive end -->

Top Fixed Menu Bar on Scroll

1.jQuery Library add
2.html:

<div class="nav-container">
	 <div class="nav">
		  <ul>
			   <li><a href="">Menu I</a></li>
			   <li><a href="">Menu II</a></li>
			   <li><a href="">Menu III</a></li>
		  </ul>        
	 </div>
</div>

3.CSS

.fix-nav {
/* this make our menu fixed top */
    z-index: 9999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
}
 
.fix-body {
/* this will adjust body top margin to prevent content jumping when nav gets fix  */
    margin-top: 50px;
/* adjust as per height of your menu */;
}
.nav-container {
    background-color: #f86d5a;
}

4.js

<script>
$(window).scroll(function () {
     if ($(this).scrollTop() > 250) {
          $('.nav-container').addClass("fix-nav");
  $('body').addClass("fix-body");
     } else {
  $('.nav-container').removeClass("fix-nav");
  $('body').removeClass("fix-body");
     }
});
</script>

Problem Face CSS

|| scroll bar color:

:-webkit-scrollbar {
	width: 6px;
	padding: 0 5px;
	background: #1f1c1a;
}

::-webkit-scrollbar-thumb {
	background: #333290;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

|| image scroll:

{style="overflow-y:scroll;height:600px;}
or
<div class="scrollingDiv">foo</div> 

div.scrollingDiv{
   overflow:scroll;
}

|| Gradient Background:

background: -webkit-linear-gradient(0deg, #95D146 10%, #76af2b 90%); /* Chrome 10+, Saf5.1+ */
background:    -moz-linear-gradient(0deg, #95D146 10%, #76af2b 90%); /* FF3.6+ */
background:     -ms-linear-gradient(0deg, #95D146 10%, #76af2b 90%); /* IE10 */
background:      -o-linear-gradient(0deg, #95D146 10%, #76af2b 90%); /* Opera 11.10+ */
background:         linear-gradient(0deg, #95D146 10%, #76af2b 90%); /* W3C */

|| Gradiend Only border-right:

border-right-width:1px;
-webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, transparent), color-stop(0.5, grey), color-stop(0.5, grey), color-stop(1, transparent)) 0 100%;

|| Specify a background color for every

element that is the second child of its parent:

 td:nth-child(2) {
    background: #ff0000;
}

|| Exact Middle for all display:

.banner_bar {
  background: url("../images/ycd.png") no-repeat scroll 54% 0 rgba(0, 0, 0, 0);
  bottom: auto;
  left: 5%;
  padding: 36px 0 0;
  position: absolute;
  right: 5%;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}

|| WordPress Slider Free Version:

 
div.amazingslider-box-1 :nth-child(3) { 
   visibility: hidden;
}

|| font add in css file:

@font-face {
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}

|| letter spacing:

a {letter-spacing: 2px;}

|| word wrap:

p {word-wrap:break-word;}

|| When you will see that google chrome don’t show background images. You will see that have a this code.

-webkit-backface-visibility:hidden;
solve:-webkit-backface-visibility:visible;

|| left vertical menu:

#sidenav .sidebar_menu{display:none;}
#sidenav:hover > .sidebar_menu{display:block;}
.cms-home #sidenav .sidebar_menu{display:block !important;}

|| background properties:

.background-attachment: fixed;
.background-size:100% 100%;
.background-size:cover;

|| .background-image:url('../images/go.png');
	background-position:left;
	-webkit-transition: all 0.8s ease-in-out;
	-moz-transition: all 0.8s ease-in-out;
	-o-transition: all 0.8s ease-in-out;

|| for search:

-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
.input-text:focus{width:0px;}    

|| Inset box shadow:

.box-shadow: -15px 0 15px -15px inset;

|| CSS3 inset box-shadow on left and right sides only:

-moz-box-shadow:inset 5px 0 5px -5px #CCCCCC,inset -5px 0 5px -5px #CCCCCC;
-webkit-box-shadow:nset 5px 0 5px -5px #CCCCCC, inset -5px 0 5px -5px #CCCCCC;
box-shadow:inset 5px 0 5px -5px #CCCCCC,inset -5px 0 5px -5px #CCCCCC;

|| Only Bottom Shadow:

-webkit-box-shadow: 0 8px 6px -6px #CCCCCC;
-moz-box-shadow: 0 8px 6px -6px #CCCCCC;
box-shadow: 0 8px 6px -6px #CCCCCC;

|| box-shadow on Right and Bottom sides only:

-moz-box-shadow:4px 3px 8px 0 #CCCCCC;
-webkit-box-shadow:4px 3px 8px 0 #CCCCCC;
box-shadow:4px 3px 8px 0 #CCCCCC;

The transition effect

Multiple property changes
To add a transitional effect for more than one style, add more properties separated
by commas. This can be done as follows:

{transition: width 2s, height 2s, transform 2s;}

The CSS3 transition properties
The transition has the following four properties:
• transition-property
• transition-duration
• transition-timing-function
• transition-delay
You can specify all the properties, one on each line, as follows:

div {
	transition-property: opacity;
	transition-duration: 1s;
	transition-timing-function: linear;
	transition-delay: 2s;
	/* Safari */
	-webkit-transition-property: opacity;
	-webkit-transition-duration:1s;
	-webkit-transition-timing-function:linear;
	-webkit-transition-delay:2s;
	/* Mozilla */
	-moz-transition-property: opacity;
	-moz-transition-duration:1s;
	-moz-transition-timing-function:linear;
	-moz-transition-delay:2s;
}

Alternatively, you can specify all the properties in a single-line declaration using the shorthand transition property in the following way:

div {
	transition: opacity 1s linear 2s;
}