From 78d18fd64ca30d72e30a6be39308dbf937f9471b Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 5 Oct 2024 22:39:48 +0300
Subject: [PATCH] Fixed offset issue

---
 .../primevue/src/imagecompare/style/ImageCompareStyle.js    | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/primevue/src/imagecompare/style/ImageCompareStyle.js b/packages/primevue/src/imagecompare/style/ImageCompareStyle.js
index 29191d5c9..52b7e0438 100644
--- a/packages/primevue/src/imagecompare/style/ImageCompareStyle.js
+++ b/packages/primevue/src/imagecompare/style/ImageCompareStyle.js
@@ -26,6 +26,7 @@ const theme = ({ dt }) => `
     margin-left: calc(-1 * calc(${dt('imagecompare.handle.size')} / 2));
     background-color: transparent;
     outline: none;
+    transition: all ${dt('imagecompare.handle.transition.duration')};
 }
 
 .p-imagecompare-slider::-webkit-slider-thumb {
@@ -61,6 +62,11 @@ const theme = ({ dt }) => `
     outline: ${dt('imagecompare.handle.focus.ring.width')} ${dt('imagecompare.handle.focus.ring.style')} ${dt('imagecompare.handle.focus.ring.color')};
     outline-offset: ${dt('imagecompare.handle.focus.ring.offset')};
 }
+    
+.p-imagecompare-slider:hover {
+    width: calc(100% + ${dt('imagecompare.handle.hover.size')});
+    margin-left: calc(-1 * calc(${dt('imagecompare.handle.hover.size')} / 2));
+}
 
 .p-imagecompare-slider:hover::-webkit-slider-thumb {
     background: ${dt('imagecompare.handle.hover.background')};