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..1068355b34
--- /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{ /* 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{ /* OOB catalog item short description class */
+  transform: scale(1.2) translateX(15rem); /* 120% zoom and 15rem right shift*/
+}
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.