Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
LESS & SCSS variables added
  • Loading branch information
ciar4n committed Apr 14, 2016
1 parent 1399f24 commit 57c74b6
Show file tree
Hide file tree
Showing 24 changed files with 451 additions and 141 deletions.
198 changes: 145 additions & 53 deletions css/imagehover.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/imagehover.min.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion less/effects/_imghvr-blur.less
Expand Up @@ -12,7 +12,7 @@
}
figcaption {
opacity: 1;
.transition-delay(0.2s);
.transition-delay(@transition-duration * 0.6);
}
}
}
43 changes: 40 additions & 3 deletions less/effects/_imghvr-fade.less
@@ -1,6 +1,6 @@
/* imghvr-fade
/* imghvr-fade-*
----------------------------- */
.imghvr-fade {
[class^='imghvr-fade'], [class*=' imghvr-fade'] {
figcaption {
opacity: 0;
}
Expand All @@ -11,5 +11,42 @@
figcaption {
opacity: 1;
}
> img, figcaption {
.transform(translate(0,0));
}
}
}

/* imghvr-fade
----------------------------- */
.imghvr-fade {

}
/* imghvr-fade-in-up
----------------------------- */
.imghvr-fade-in-up {
figcaption {
.transform(translate(0,15%));
}
}
/* imghvr-fade-in-down
----------------------------- */
.imghvr-fade-in-down {
figcaption {
.transform(translate(0,-15%));
}
}
/* imghvr-fade-in-left
----------------------------- */
.imghvr-fade-in-left {
figcaption {
.transform(translate(-15%,0));
}
}
/* imghvr-fade-in-right
----------------------------- */
.imghvr-fade-in-right {
figcaption {
.transform(translate(15%,0));
}
}
}
2 changes: 1 addition & 1 deletion less/effects/_imghvr-flip.less
Expand Up @@ -14,7 +14,7 @@
}
figcaption {
opacity: 1;
.transition-delay(0.15s);
.transition-delay(@transition-duration * 0.4);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion less/effects/_imghvr-fold.less
Expand Up @@ -17,7 +17,7 @@
figcaption {
.transform(rotateX(0), translate3d(0,0%, 0), scale(1));
opacity: 1;
.transition-delay(0.2s);
.transition-delay(@transition-duration * 0.6);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion less/effects/_imghvr-hinge.less
Expand Up @@ -12,7 +12,7 @@
}
figcaption {
opacity: 1;
.transition-delay(0.2s);
.transition-delay(@transition-duration * 0.6);
}
}
}
Expand Down
33 changes: 31 additions & 2 deletions less/effects/_imghvr-reveal.less
Expand Up @@ -4,7 +4,7 @@
&:before {
.fill;
content: '';
background-color: inherit;
background-color: @figcaption-bg;
}
figcaption {
opacity: 0;
Expand All @@ -15,7 +15,7 @@
}
figcaption {
opacity: 1;
.transition-delay(0.2s);
.transition-delay(@transition-duration * 0.6);
}
}
}
Expand Down Expand Up @@ -46,4 +46,33 @@
&:before {
.translateX(-100%);
}
}

/* imghvr-reveal-top-left
----------------------------- */
.imghvr-reveal-top-left {
&:before {
.translate(-100%,-100%);
}
}
/* imghvr-reveal-top-right
----------------------------- */
.imghvr-reveal-top-right {
&:before {
.translate(100%,-100%);
}
}
/* imghvr-reveal-bottom-left
----------------------------- */
.imghvr-reveal-bottom-left {
&:before {
.translate(-100%,100%);
}
}
/* imghvr-reveal-bottom-right
----------------------------- */
.imghvr-reveal-bottom-right {
&:before {
.translate(100%,100%);
}
}
8 changes: 6 additions & 2 deletions less/effects/_imghvr-shutter-in.less
Expand Up @@ -2,7 +2,7 @@
----------------------------- */
[class^='imghvr-shutter-in-'], [class*=' imghvr-shutter-in-'] {
&:after, &:before {
background: inherit;
background: @figcaption-bg;
position: absolute;
content: '';
}
Expand All @@ -21,7 +21,7 @@
&:hover {
figcaption {
opacity: 1;
.transition-delay(0.2s);
.transition-delay(@transition-duration * 0.6);
}
}
}
Expand Down Expand Up @@ -61,6 +61,7 @@
&:hover {
&:after, &:before {
width: 100%;
opacity: 0.75;
}
}
}
Expand All @@ -74,6 +75,7 @@
&:hover {
&:after, &:before {
height: 100%;
opacity: 0.75;
}
}
}
Expand All @@ -84,6 +86,7 @@
width: 200%;
height: 200%;
.transition (all 0.6s ease);
opacity: 0.75;
}
&:after {
.transform(skew(-45deg), translateX(-150%));
Expand All @@ -107,6 +110,7 @@
width: 200%;
height: 200%;
.transition (all 0.6s ease);
opacity: 0.75;
}
&:after {
.transform(skew(45deg), translateX(-100%));
Expand Down
6 changes: 3 additions & 3 deletions less/effects/_imghvr-shutter-out.less
Expand Up @@ -2,10 +2,10 @@
----------------------------- */
[class^='imghvr-shutter-out-'], [class*=' imghvr-shutter-out-'] {
&:before {
background: inherit;
background: @figcaption-bg;
position: absolute;
content: '';
.transition-delay(0.1s);
.transition-delay(@transition-duration * 0.3);
}
figcaption {
opacity: 0;
Expand All @@ -17,7 +17,7 @@
}
figcaption {
opacity: 1;
.transition-delay(0.1s);
.transition-delay(@transition-duration * 0.3);
}
}
}
Expand Down
31 changes: 28 additions & 3 deletions less/effects/_imghvr-slide.less
Expand Up @@ -12,23 +12,20 @@
.imghvr-slide-up {
figcaption {
.translateY(100%);
background-color: inherit;
}
}
/* imghvr-slide-down
----------------------------- */
.imghvr-slide-down {
figcaption {
.translateY(-100%);
background-color: inherit;
}
}
/* imghvr-slide-left
----------------------------- */
.imghvr-slide-left {
figcaption {
.translateX(100%);
background-color: inherit;
}
}
/* imghvr-slide-right
Expand All @@ -37,4 +34,32 @@
figcaption {
.translateX(-100%);
}
}
/* imghvr-slide-top-left
----------------------------- */
.imghvr-slide-top-left {
figcaption {
.translate(-100%,-100%);
}
}
/* imghvr-slide-top-right
----------------------------- */
.imghvr-slide-top-right {
figcaption {
.translate(100%,-100%);
}
}
/* imghvr-slide-bottom-left
----------------------------- */
.imghvr-slide-bottom-left {
figcaption {
.translate(-100%,100%);
}
}
/* imghvr-slide-bottom-right
----------------------------- */
.imghvr-slide-bottom-right {
figcaption {
.translate(100%,100%);
}
}
14 changes: 7 additions & 7 deletions less/effects/_imghvr-zoom-out.less
Expand Up @@ -12,7 +12,7 @@
figcaption {
.transform(scale(1));
opacity: 1;
.transition-delay(0.3s);
.transition-delay(@transition-duration);
}
}
}
Expand All @@ -31,7 +31,7 @@
.imghvr-zoom-out-up {
&:hover, &.hover {
> img {
.animation(imghvr-zoom-out-up 0.4s linear);
.animation(imghvr-zoom-out-up @transition-duration * 1.15 linear);
.animation-iteration-count(1);
.animation-fill-mode(forwards);
}
Expand Down Expand Up @@ -68,7 +68,7 @@
.imghvr-zoom-out-down {
&:hover, &.hover {
> img {
.animation(imghvr-zoom-out-down 0.4s linear);
.animation(imghvr-zoom-out-down @transition-duration * 1.15 linear);
.animation-iteration-count(1);
.animation-fill-mode(forwards);
}
Expand Down Expand Up @@ -105,7 +105,7 @@
.imghvr-zoom-out-left {
&:hover, &.hover {
> img {
.animation(imghvr-zoom-out-left 0.4s linear);
.animation(imghvr-zoom-out-left @transition-duration * 1.15 linear);
.animation-iteration-count(1);
.animation-fill-mode(forwards);
}
Expand Down Expand Up @@ -142,7 +142,7 @@
.imghvr-zoom-out-right {
&:hover, &.hover {
> img {
.animation(imghvr-zoom-out-right 0.4s linear);
.animation(imghvr-zoom-out-right @transition-duration * 1.15 linear);
.animation-iteration-count(1);
.animation-fill-mode(forwards);
}
Expand Down Expand Up @@ -191,7 +191,7 @@
figcaption {
.transform(rotateX(0), translateY(0%), scale(1));
opacity: 1;
.transition-delay(0.3s);
.transition-delay(@transition-duration);
}
}
}
Expand All @@ -212,7 +212,7 @@
figcaption {
.transform(rotateY(0), translate(0,0), scale(1));
opacity: 1;
.transition-delay(0.3s);
.transition-delay(@transition-duration);
}
}
}
28 changes: 19 additions & 9 deletions less/imagehover.less
Expand Up @@ -9,12 +9,23 @@
*/
@import "_mixins.less";

@image-bg: #2266a5;
@figcaption-bg: #135796;
@figcaption-padding: 30px;
@text-color: #ffffff;
@border-color: #ffffff;
@border-margin: 5px;
@border-width: 4px;
@transition-duration: 0.35s;
@shift-distance: 10px;


[class^='imghvr-'],[class*=' imghvr-']{
position: relative;
display: inline-block;
margin: 0px;
max-width: 100%;
background-color: rgba(1, 87, 155, 0.75);
background-color: @image-bg;
color: #fff;
overflow: hidden;
-webkit-backface-visibility: hidden;
Expand All @@ -26,17 +37,16 @@
max-width: 100%;
}
figcaption {
background-color: inherit;
background-color: @figcaption-bg;
position: absolute;
padding: 30px;
.fill;
color: @text-color;
h1, h2, h3, h4, h5, h6 {
color: @text-color;
}
}
h3, p {
margin: 0;
padding: 0;
color: #fff;
}
> a {
a {
.fill;
z-index: 1;
}
Expand All @@ -45,7 +55,7 @@
[class^='imghvr-'], [class*=' imghvr-'], [class^='imghvr-']:before, [class^='imghvr-']:after, [class*=' imghvr-']:before, [class*=' imghvr-']:after,
[class^='imghvr-'] *, [class*=' imghvr-'] *, [class^='imghvr-'] *:before, [class^='imghvr-'] *:after, [class*=' imghvr-'] *:before, [class*=' imghvr-'] *:after {
.box-sizing(border-box);
.transition (all 0.35s ease);
.transition (all @transition-duration ease);
}

@import "effects/_imghvr-fade";
Expand Down

0 comments on commit 57c74b6

Please sign in to comment.