/* Start: Recommended Isotope styles */
/**** Isotope Filtering ****/
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
transition-duration: 0s;
}
/* End: Recommended Isotope styles */
/* disable CSS transitions for isotope-containers with infinite scrolling*/
.isotope.infinite-scrolling {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
.isotope-element a,
.isotope-element a code {
color: #fff !important;
text-decoration: none;
-moz-transition: none;
-webkit-transition: none;
transition: none;
}
.isotope-element a:hover,
.isotope-element a:hover code {
color: #fff;
}
.isotope-element a:active,
.isotope-element a:active code {
color: #fff;
}
/**** Isotope styles ****/
/* required for isotope-containers to inherit vertical size from window */
html,
body {
height: 100%;
}
.isotope-element {
width: 150px;
height: 150px;
margin: 10px 10px;
float: left;
overflow: hidden;
position: relative;
background: #bebebe;
color: #fff;
}
.isotope-element img {
width: 150px;
margin: 0 auto;
text-align: center;
}
.variable-sizes .isotope-element.width2 { width: 230px; }
.variable-sizes .isotope-element.height2 { height: 230px; }
.variable-sizes .isotope-element.width2.height2 {
font-size: 2.0em;
}
.isotope-element.large,
.variable-sizes .isotope-element.large,
.variable-sizes .isotope-element.large.width2.height2 {
font-size: 3.0em;
width: 350px;
height: 350px;
z-index: 100;
}
.clickable .isotope-element:hover {
cursor: pointer;
}
.clickable .isotope-element:hover h3 {
text-shadow:
0 0 10px white,
0 0 10px white
;
}
.clickable .isotope-element:hover h2 {
color: white;
}
/**** Example Filters ****/
#isotope-options {
background-color: #EEEEEE;
}
.view-isotope-example ul {
list-style: none outside none;
margin: 0;
}
.view-isotope-example li {
display: block;
padding: 3px 10px;
text-align: center;
float: left;
}
View source
- /* Start: Recommended Isotope styles */
-
- /**** Isotope Filtering ****/
-
- .isotope-item {
- z-index: 2;
- }
-
- .isotope-hidden.isotope-item {
- pointer-events: none;
- z-index: 1;
- }
-
- /**** Isotope CSS3 transitions ****/
-
- .isotope,
- .isotope .isotope-item {
- -webkit-transition-duration: 0.8s;
- -moz-transition-duration: 0.8s;
- transition-duration: 0.8s;
- }
-
- .isotope {
- -webkit-transition-property: height, width;
- -moz-transition-property: height, width;
- transition-property: height, width;
- }
-
- .isotope .isotope-item {
- -webkit-transition-property: -webkit-transform, opacity;
- -moz-transition-property: -moz-transform, opacity;
- transition-property: transform, opacity;
- }
-
- /**** disabling Isotope CSS3 transitions ****/
-
- .isotope.no-transition,
- .isotope.no-transition .isotope-item,
- .isotope .isotope-item.no-transition {
- -webkit-transition-duration: 0s;
- -moz-transition-duration: 0s;
- transition-duration: 0s;
- }
-
- /* End: Recommended Isotope styles */
-
-
-
- /* disable CSS transitions for isotope-containers with infinite scrolling*/
- .isotope.infinite-scrolling {
- -webkit-transition: none;
- -moz-transition: none;
- transition: none;
- }
-
- .isotope-element a,
- .isotope-element a code {
- color: #fff !important;
- text-decoration: none;
- -moz-transition: none;
- -webkit-transition: none;
- transition: none;
- }
-
- .isotope-element a:hover,
- .isotope-element a:hover code {
- color: #fff;
- }
-
- .isotope-element a:active,
- .isotope-element a:active code {
- color: #fff;
- }
-
- /**** Isotope styles ****/
-
- /* required for isotope-containers to inherit vertical size from window */
- html,
- body {
- height: 100%;
- }
-
- .isotope-element {
- width: 150px;
- height: 150px;
- margin: 10px 10px;
- float: left;
- overflow: hidden;
- position: relative;
- background: #bebebe;
- color: #fff;
- }
-
- .isotope-element img {
- width: 150px;
- margin: 0 auto;
- text-align: center;
- }
-
-
- .variable-sizes .isotope-element.width2 { width: 230px; }
-
- .variable-sizes .isotope-element.height2 { height: 230px; }
-
- .variable-sizes .isotope-element.width2.height2 {
- font-size: 2.0em;
- }
-
- .isotope-element.large,
- .variable-sizes .isotope-element.large,
- .variable-sizes .isotope-element.large.width2.height2 {
- font-size: 3.0em;
- width: 350px;
- height: 350px;
- z-index: 100;
- }
-
- .clickable .isotope-element:hover {
- cursor: pointer;
- }
-
- .clickable .isotope-element:hover h3 {
- text-shadow:
- 0 0 10px white,
- 0 0 10px white
- ;
- }
-
- .clickable .isotope-element:hover h2 {
- color: white;
- }
-
- /**** Example Filters ****/
-
- #isotope-options {
- background-color: #EEEEEE;
- }
-
- .view-isotope-example ul {
- list-style: none outside none;
- margin: 0;
- }
-
- .view-isotope-example li {
- display: block;
- padding: 3px 10px;
- text-align: center;
- float: left;
- }