diff --git a/dev/styles/main/contentElements/imageTextLink.less b/dev/styles/main/contentElements/imageTextLink.less index 31d1e46..f1e6a5b 100644 --- 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 index bd122c9..7d4a53f 100644 --- 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{