add hover effects for slider icons

mate-academy · Aug 21, 2024 · 89d42c0 · 89d42c0
1 parent 3f30e9e
commit 89d42c0
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 20 deletions.
diff --git a/src/images/slider/arrow-left-black.svg b/src/images/slider/arrow-left-black.svg
diff --git a/src/images/slider/arrow-left.svg b/src/images/slider/arrow-left.svg
diff --git a/src/images/slider/arrow-right.svg b/src/images/slider/arrow-right.svg
diff --git a/src/images/slider/hover-left.svg b/src/images/slider/hover-left.svg
diff --git a/src/images/slider/hover-right.svg b/src/images/slider/hover-right.svg
diff --git a/src/images/slider/slide-img-1.jpg b/src/images/slider/slide-img-1.jpg
diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss
@@ -81,6 +81,8 @@
 
     font-size: 24px;
     line-height: 36px;
+
+    @include hover(color, $color-hover-blue);
   }
 
   &__contacts {

diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss
@@ -13,6 +13,10 @@
     padding-top: 48px;
   }
 
+  &__logo {
+    @include hover(scale, 1.05)
+  }
+
   &__menu {
     margin-left: 32px;
     width: 24px;

diff --git a/src/styles/blocks/slider.scss b/src/styles/blocks/slider.scss
@@ -50,20 +50,26 @@
   }
 
   &__icon {
-    background-color: $color-white;
     height: 32px;
     width: 32px;
+    background-size: cover;
     border-radius: 50%;
-    background-repeat: no-repeat;
-    background-position: center;
+    transition: background-image 0.3s;
 
     &--left {
-      background-image: url('/src/images/slider/arrow-left-black.svg');
+      background-image: url('/src/images/slider/arrow-left.svg');
+
+      &:hover {
+        background-image: url('/src/images/slider/hover-left.svg');
+      }
     }
 
     &--right {
-      background-image: url('/src/images/slider/arrow-left-black.svg');
-      rotate: 180deg;
+      background-image: url('/src/images/slider/arrow-right.svg');
+
+      &:hover {
+        background-image: url('/src/images/slider/hover-right.svg');
+      }
     }
   }