[FEATURE] add animations for image link (imageTextLink elem)

t3kit · May 31, 2016 · 0596333 · 0596333
1 parent eb70660
commit 0596333
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 26 deletions.
diff --git a/dev/styles/main/contentElements/imageTextLink.less b/dev/styles/main/contentElements/imageTextLink.less
@@ -14,7 +14,7 @@
    display:inline-block;
     position: relative;
 }
-.img-text-link__img-link:hover:after{
+.img-text-link__img-link:after{
     content:'';
     top: 0;
     left: 0;
@@ -23,35 +23,36 @@
     height: 100%;
     display: block;
     position: absolute;
-    background: #50b4d8;
-    opacity: 0.8;
+    background: @main-color;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.5s ease, visibility 0.5s ease;
 }
-.img-text-link__img-link:hover:before{
-    font-family: 'icons';
-    speak: none;
-    font-style: normal;
-    font-weight: normal;
-    font-variant: normal;
-    text-transform: none;
-    line-height: 1;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    // content: '\e675';
+.img-text-link__img-link:hover:after{
+    opacity: 0.5;
+    visibility: visible;
+}
+.img-text-link__img-link:before{
+    .icons();
     position: absolute;
-    font-size: 42px;
-    border: 1px solid;
+    font-size: 38px;
+    padding: 12px;
+    border: 2px solid tint(@main-color, 90%);
     border-radius: 50%;
-    padding: 3px;
-    top: 40%;
-    -webkit-transform: translateY(-40%);
-    transform: translateY(-40%);
-    text-align: center;
+    top: 50%;
     left: 50%;
-    -webkit-transform: translateX(-50%);
-    transform: translateX(-50%);
+    margin-left: -33px;
+    margin-top: -33px;
     z-index: 11;
-    color: #fff;
+    color: tint(@main-color, 90%);
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.5s ease, visibility 0.5s ease;
+}
 
+.img-text-link__img-link:hover:before{
+    opacity: 1;
+    visibility: visible;
 }
 
 // =========================================================

diff --git a/dev/styles/main/icons/icons.less b/dev/styles/main/icons/icons.less
@@ -81,13 +81,12 @@
 .icon-t3-quoteMark:before {content: "\e0de";} // quote
 .icon-text-btn__link:after {content: "\e91c";} // leftIconTextButton
 .big-icon-text-btn__link:after {content: "\e91c";} // bigIconTextButton
-.img-text-link__img-link:hover:before {content: "\e943";} // imageTextLink
+.img-text-link__img-link:before {content: "\e943";} // imageTextLink
 .logo-carousel__btn-next:before{content: '\e91d';} // logo carousel next
 .logo-carousel__btn-prev:before{content: '\e91b';} // logo carousel previous
 
 
 
-
 // ===== Main navigation dropdown arrow =====
 @media (min-width: 992px) {
     .no-touch ._sub .main-navigation__item-link:after{