From 92b184bc2240bb02afd93d2cadc63930e170cf27 Mon Sep 17 00:00:00 2001 From: Raghav Sharma <53517312+raghavs046@users.noreply.github.com> Date: Fri, 10 Oct 2025 18:26:21 +0530 Subject: [PATCH 1/6] Create test.js --- Specialized Areas/Fix scripts/test.js | 1 + 1 file changed, 1 insertion(+) create mode 100644 Specialized Areas/Fix scripts/test.js diff --git a/Specialized Areas/Fix scripts/test.js b/Specialized Areas/Fix scripts/test.js new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/Specialized Areas/Fix scripts/test.js @@ -0,0 +1 @@ + From f0add90e292d47924110b758d3e0a1c123b4abb5 Mon Sep 17 00:00:00 2001 From: Raghav Sharma <53517312+raghavs046@users.noreply.github.com> Date: Fri, 10 Oct 2025 18:27:02 +0530 Subject: [PATCH 2/6] Delete Specialized Areas/Fix scripts/test.js --- Specialized Areas/Fix scripts/test.js | 1 - 1 file changed, 1 deletion(-) delete mode 100644 Specialized Areas/Fix scripts/test.js diff --git a/Specialized Areas/Fix scripts/test.js b/Specialized Areas/Fix scripts/test.js deleted file mode 100644 index 8b13789179..0000000000 --- a/Specialized Areas/Fix scripts/test.js +++ /dev/null @@ -1 +0,0 @@ - From 6744935031d4ee40ebdb9825354968790878207b Mon Sep 17 00:00:00 2001 From: Raghav Sharma <53517312+raghavs046@users.noreply.github.com> Date: Sun, 12 Oct 2025 19:32:54 +0530 Subject: [PATCH 3/6] Create CSS.js --- .../Styles/Zoom Catalog Image on Hover/CSS.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 Specialized Areas/Styles/Zoom Catalog Image on Hover/CSS.js diff --git a/Specialized Areas/Styles/Zoom Catalog Image on Hover/CSS.js b/Specialized Areas/Styles/Zoom Catalog Image on Hover/CSS.js new file mode 100644 index 0000000000..6c421c3f9a --- /dev/null +++ b/Specialized Areas/Styles/Zoom Catalog Image on Hover/CSS.js @@ -0,0 +1,12 @@ +/* +Zoom - in catalog item image on mouse hover. +*/ +.catalog-item-image:hover{ + transform: scale(2); /* 200% zoom */ +} +/* +Zoom - in catalog item short description on mouse hover. +*/ +.sc-cat-item-short-description:hover{ + transform: scale(1.2) translateX(15rem); /* 120% zoom nad 15rem right shift*/ +} From 107ab793d8de1161823fb73e4540de34b0e92ac0 Mon Sep 17 00:00:00 2001 From: Raghav Sharma <53517312+raghavs046@users.noreply.github.com> Date: Sun, 12 Oct 2025 19:37:47 +0530 Subject: [PATCH 4/6] Create README.md --- .../Styles/Zoom Catalog Image on Hover/README.md | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 Specialized Areas/Styles/Zoom Catalog Image on Hover/README.md diff --git a/Specialized Areas/Styles/Zoom Catalog Image on Hover/README.md b/Specialized Areas/Styles/Zoom Catalog Image on Hover/README.md new file mode 100644 index 0000000000..11c9496865 --- /dev/null +++ b/Specialized Areas/Styles/Zoom Catalog Image on Hover/README.md @@ -0,0 +1,8 @@ +**How to use** +1. Add this css code to "Page specific css" on "sc_cat_item" page for Service Portal. +2. Add this css code to "Page specific css" on "esc_sc_cat_item" page for Employee centre portal +3. This can also be used in css includes at theme level. +4. If your portal is customised and different pages are used for catalog items through Page Route Maps, use this in your pages. + +**Use Case** +1. Many product catalogs have small images, organisations don't want to change that at backend but want to give the user the ability to see a zoomed-in image. From 58c46d7063fdc3bbc06531aa5134ede2f64830f4 Mon Sep 17 00:00:00 2001 From: Raghav Sharma <53517312+raghavs046@users.noreply.github.com> Date: Sun, 12 Oct 2025 19:38:14 +0530 Subject: [PATCH 5/6] Update CSS.js --- Specialized Areas/Styles/Zoom Catalog Image on Hover/CSS.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Specialized Areas/Styles/Zoom Catalog Image on Hover/CSS.js b/Specialized Areas/Styles/Zoom Catalog Image on Hover/CSS.js index 6c421c3f9a..168a5cbd80 100644 --- a/Specialized Areas/Styles/Zoom Catalog Image on Hover/CSS.js +++ b/Specialized Areas/Styles/Zoom Catalog Image on Hover/CSS.js @@ -8,5 +8,5 @@ Zoom - in catalog item image on mouse hover. Zoom - in catalog item short description on mouse hover. */ .sc-cat-item-short-description:hover{ - transform: scale(1.2) translateX(15rem); /* 120% zoom nad 15rem right shift*/ + transform: scale(1.2) translateX(15rem); /* 120% zoom and 15rem right shift*/ } From 96e68a6f07431bff74a17e0cb61c0348bb47259c Mon Sep 17 00:00:00 2001 From: Raghav Sharma <53517312+raghavs046@users.noreply.github.com> Date: Sun, 12 Oct 2025 19:38:52 +0530 Subject: [PATCH 6/6] Update CSS.js --- Specialized Areas/Styles/Zoom Catalog Image on Hover/CSS.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Specialized Areas/Styles/Zoom Catalog Image on Hover/CSS.js b/Specialized Areas/Styles/Zoom Catalog Image on Hover/CSS.js index 168a5cbd80..1068355b34 100644 --- a/Specialized Areas/Styles/Zoom Catalog Image on Hover/CSS.js +++ b/Specialized Areas/Styles/Zoom Catalog Image on Hover/CSS.js @@ -1,12 +1,12 @@ /* Zoom - in catalog item image on mouse hover. */ -.catalog-item-image:hover{ +.catalog-item-image:hover{ /* OOB catalog item image class */ transform: scale(2); /* 200% zoom */ } /* Zoom - in catalog item short description on mouse hover. */ -.sc-cat-item-short-description:hover{ +.sc-cat-item-short-description:hover{ /* OOB catalog item short description class */ transform: scale(1.2) translateX(15rem); /* 120% zoom and 15rem right shift*/ }