Transition the prev/next opacities on hover.

Author: lokesh

css/lightbox.css

@@ -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,33 +172,33 @@ 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;
   padding-bottom: 1em;
   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);

sass/lightbox.sass

@@ -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)