Browse Source

Transition the prev/next opacities on hover.

master
Lokesh Dhakar 7 years ago
parent
commit
1e62ca272f
2 changed files with 39 additions and 12 deletions
  1. +32
    -12
      css/lightbox.css
  2. +7
    -0
      sass/lightbox.sass

+ 32
- 12
css/lightbox.css View File

@@ -120,23 +120,39 @@ body:after {
.lb-prev {
left: 0;
float: left;
}
/* line 87, ../sass/lightbox.sass */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
/* line 89, ../sass/lightbox.sass */
.lb-prev:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
background: url(../img/prev.png) left 48% no-repeat;
}

/* line 90, ../sass/lightbox.sass */
/* line 93, ../sass/lightbox.sass */
.lb-next {
right: 0;
float: right;
}
/* line 93, ../sass/lightbox.sass */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
/* line 98, ../sass/lightbox.sass */
.lb-next:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
background: url(../img/next.png) right 48% no-repeat;
}

/* line 96, ../sass/lightbox.sass */
/* line 102, ../sass/lightbox.sass */
.lb-dataContainer {
margin: 0 auto;
padding-top: 5px;
@@ -156,25 +172,25 @@ body:after {
clear: both;
}

/* line 103, ../sass/lightbox.sass */
/* line 109, ../sass/lightbox.sass */
.lb-data {
padding: 0 4px;
color: #bbbbbb;
}
/* line 106, ../sass/lightbox.sass */
/* line 112, ../sass/lightbox.sass */
.lb-data .lb-details {
width: 85%;
float: left;
text-align: left;
line-height: 1.1em;
}
/* line 111, ../sass/lightbox.sass */
/* line 117, ../sass/lightbox.sass */
.lb-data .lb-caption {
font-size: 13px;
font-weight: bold;
line-height: 1em;
}
/* line 115, ../sass/lightbox.sass */
/* line 121, ../sass/lightbox.sass */
.lb-data .lb-number {
display: block;
clear: left;
@@ -182,7 +198,7 @@ body:after {
font-size: 12px;
color: #999999;
}
/* line 121, ../sass/lightbox.sass */
/* line 127, ../sass/lightbox.sass */
.lb-data .lb-close {
display: block;
float: right;
@@ -193,8 +209,12 @@ body:after {
outline: none;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
}
/* line 130, ../sass/lightbox.sass */
/* line 137, ../sass/lightbox.sass */
.lb-data .lb-close:hover {
cursor: pointer;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);


+ 7
- 0
sass/lightbox.sass View File

@@ -84,13 +84,19 @@ body:after
.lb-prev
left: 0
float: left
+opacity(0)
+transition(opacity 0.6s)
&:hover
+opacity(1)
background: url(../img/prev.png) left 48% no-repeat

.lb-next
right: 0
float: right
+opacity(0)
+transition(opacity 0.6s)
&:hover
+opacity(1)
background: url(../img/next.png) right 48% no-repeat

.lb-dataContainer
@@ -127,6 +133,7 @@ body:after
text-align: right
outline: none
+opacity(0.7)
+transition(opacity 0.2s)
&:hover
cursor: pointer
+opacity(1)

Loading…
Cancel
Save