[Update]Redmine - #641 : Image transition

wp-content/themes/nap/assets/css/main.css

@@ -1092,7 +1092,7 @@ aside.news-wrapper {
   position: relative;
   height: 100%;
   background: #fff;
-  overflow-y: hidden;
+  overflow-x: hidden;
   opacity: 0;
   border-left: 1px solid rgba(26,26,26,0.1);
 }
@@ -1154,7 +1154,9 @@ label.chevron.bottom {
     width: 120%;
 }
 
-
+label.chevron.bottom::first-letter {
+text-transform: uppercase;
+}
 .pa_format ul li img {
     vertical-align: top;
     margin-top: -50px;
@@ -1200,6 +1202,7 @@ label.chevron.bottom {
   margin: 0 auto;
   position: relative;
 }
+.list li .format-desc,
 .pa_format li .format-desc{
   font-size: 9px;
   line-height: 12px;
@@ -1328,7 +1331,7 @@ label.chevron.bottom {
   position: relative;
 }
 .product-list figure img{
-  height: 100%;
+  height: 180px;
   object-fit: cover;
 }
 
@@ -1606,6 +1609,7 @@ label.chevron.bottom {
   left: 0;
   opacity: 0;
   visibility: hidden;
+  margin-left: -4px;
 }
 .filter-list .top-header{
   margin-bottom: 25px;
@@ -1739,21 +1743,36 @@ label.chevron.bottom {
   left: 0;
   right: 0;
   height: 100%;
-  top: -100%;
+  top: 0;
   bottom: 0;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: 90%;
+  z-index: 0;
+}
+.top-100{
+  /*top: -100%;*/
+}
+.transition-0{
+  -webkit-transition: all 0s ease-in-out;
+  -moz-transition: all 0s ease-in-out;
+  -o-transition: all 0s ease-in-out;
+  -ms-transition: all 0s ease-in-out;
+  transition: all 0s ease-in-out;
+}
+.transition-1{
   -webkit-transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out;
   -o-transition: all 1s ease-in-out;
   -ms-transition: all 1s ease-in-out;
   transition: all 1s ease-in-out;
-  z-index: 0;
 }
 .cover-wrapper.current-cover{
+  z-index: 3 !important ;
   top: 0 !important;
-  z-index: 3 !important;
+}
+.cover-wrapper.last-current-cover{
+  z-index: 3 !important ;
 }
 .cover-wrapper.current-cover p{
   opacity: 1;
@@ -1765,12 +1784,10 @@ label.chevron.bottom {
 }
 .cover-wrapper.prev{
   top: -100%;
-  z-index: 4 !important;
 }
 .cover-wrapper.next{
+  top: 100%;
  display: block;
- z-index: 2;
- top: 0;
 }
 .cover-wrapper.last{
   /*z-index: 0;*/
@@ -1804,7 +1821,7 @@ label.chevron.bottom {
   margin-top: 27px;
 }
 .panel .product-list article {
-  height: 195px;
+ /* height: 195px;*/
   width: 170px;
   display: inline-block;
   cursor: pointer;