diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6b665aa
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/README.md b/README.md
index 36be585..93efa0c 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
 # Slider
 
 - Had problem while making the image disappear
+- Added animation now and now this slider is as per the description
diff --git a/img-1.jpeg b/img-1.jpeg
deleted file mode 100644
index ed355c9..0000000
Binary files a/img-1.jpeg and /dev/null differ
diff --git a/img-2.jpeg b/img-2.jpeg
deleted file mode 100644
index 80e3962..0000000
Binary files a/img-2.jpeg and /dev/null differ
diff --git a/person-1.jpeg b/person-1.jpeg
deleted file mode 100644
index c02eed9..0000000
Binary files a/person-1.jpeg and /dev/null differ
diff --git a/script.js b/script.js
index 1f6647b..641646f 100644
--- a/script.js
+++ b/script.js
@@ -46,7 +46,11 @@ function createImage(src, alt, dataId) {
   imgContainer.innerHTML = ''
   // creation of image
   const image = document.createElement('img')
+  // added class that makes image responsive
   image.classList.add('responsive-img')
+  // added class that helps in animation
+  image.classList.add('fade')
+
   image.setAttribute('src', src)
   image.setAttribute('alt', alt)
   image.setAttribute('data-id', dataId)
diff --git a/style.css b/style.css
index d44bf5a..5e7e81d 100644
--- a/style.css
+++ b/style.css
@@ -23,7 +23,8 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  /* this might eat the part of image if the images dont respect the aspect ratio of 1:1*/
+  /* this might eat the part of image 
+  if the images don't respect the aspect ratio */
   height: 50%;
   width: 50%;
   /* background-color: red; */
@@ -52,3 +53,21 @@
   cursor: pointer;
   color: #fff;
 }
+/* animation */
+/* inspired from w3school*/
+
+.fade {
+  animation-name: fade;
+  animation-duration: 1.5s;
+}
+@keyframes fade {
+  0% {
+    opacity: 0.2;
+  }
+  50% {
+    opacity: 0.6;
+  }
+  100% {
+    opacity: 1;
+  }
+}