diff --git a/src/vs/editor/contrib/folding/browser/folding.css b/src/vs/editor/contrib/folding/browser/folding.css
index 4d04b623c350c93c47dfe8b0b381722ccd3ad112..31631f54d6548bb147f1dd9bc0c3c82b1439c1e2 100644
--- a/src/vs/editor/contrib/folding/browser/folding.css
+++ b/src/vs/editor/contrib/folding/browser/folding.css
@@ -4,29 +4,43 @@
  *--------------------------------------------------------------------------------------------*/
 
 .monaco-editor .margin-view-overlays .folding {
+	margin-left: 5px;
+	cursor: pointer;
+}
+
+.monaco-editor .margin-view-overlays .folding::after {
 	background-repeat: no-repeat;
 	background-origin: border-box;
 	background-position: 3px center;
 	background-size: 15px;
-	margin-left: 5px;
-	cursor: pointer;
+	position: absolute;
+	top: 0;
+	left:0;
+	right: 0;
+	bottom: 0;
+	z-index: -1;
+	content: "";
+	opacity: 0;
+	transition: opacity 0.5s;
 }
 
-.monaco-editor .margin-view-overlays:hover .folding {
+.monaco-editor .margin-view-overlays:hover .folding::after {
 	background-image: url('arrow-expand.svg');
+	opacity: 1;
 }
 
-.monaco-editor .margin-view-overlays .folding.collapsed {
+.monaco-editor .margin-view-overlays .folding.collapsed::after {
 	background-image: url('arrow-collapse.svg');
+	opacity: 1;
 }
 
-.monaco-editor.hc-black .margin-view-overlays:hover .folding,
-.monaco-editor.vs-dark .margin-view-overlays:hover .folding {
+.monaco-editor.hc-black .margin-view-overlays:hover .folding::after,
+.monaco-editor.vs-dark .margin-view-overlays:hover .folding::after {
 	background-image: url('arrow-expand-dark.svg');
 }
 
-.monaco-editor.hc-black .margin-view-overlays .folding.collapsed,
-.monaco-editor.vs-dark .margin-view-overlays .folding.collapsed {
+.monaco-editor.hc-black .margin-view-overlays .folding.collapsed::after,
+.monaco-editor.vs-dark .margin-view-overlays .folding.collapsed::after {
 	background-image: url('arrow-collapse-dark.svg');
 }