diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..b73ff00
Binary files /dev/null and b/.DS_Store differ
diff --git a/example/showcase.html b/example/showcase.html
index 05aac07..1df0fd3 100644
--- a/example/showcase.html
+++ b/example/showcase.html
@@ -29,9 +29,9 @@
         </div>
       </header>
       <main>
-        <div class="album">
+        <div  class="album">
           <div class="img-container">
-            <img
+            <img id="imgtest"
               class="hover-preview img-preview img-1"
               src=""
               style="border-radius:50%"
@@ -48,7 +48,7 @@ <h2>Use is as a preview of a gallery</h2>
           </div>
         </div>
 
-        <div class="album">
+        <div  class="album">
           <div class="info">
             <h2>Or as a preview for a video</h2>
             <p>
@@ -63,9 +63,9 @@ <h2>Or as a preview for a video</h2>
           </div>
         </div>
 
-        <div class="album">
+        <div  class="album">
           <div class="img-container">
-            <img
+            <img 
               class="hover-preview img-preview img-3 "
               src=""
               style="border-radius:20%"
diff --git a/src/hover-preview.js b/src/hover-preview.js
index 096ed8c..0c6817e 100644
--- a/src/hover-preview.js
+++ b/src/hover-preview.js
@@ -1,7 +1,7 @@
 (function () {
   const HOVER_DELAY = 70
   const PREVIEW_DURATION = 500
-  const images = Array.from(document.querySelectorAll('.hover-preview'))
+  const images = Array.from(document.querySelectorAll('img.hover-preview'))
 
   // singleton timeout object, only one timeout should be active at a time
   const timeout = {
@@ -90,4 +90,46 @@
   images.forEach(img => {
     img.addEventListener('mouseenter', mouseEnterListener)
   })
+
+
+  const almover = () => {
+      let last_known_scroll_position = window.scrollY;
+      images.forEach(img => {
+        
+        if((last_known_scroll_position >= (parseInt(img.dataset.posy) - 10)) &&  (last_known_scroll_position <= (parseInt(img.dataset.posy)  + 10)))
+        {
+
+          hoveredImg.el = img
+          hoveredImg.poster = hoveredImg.el.getAttribute('src')
+          hoveredImg.index = -1
+          hoveredImg.images = hoveredImg.el.getAttribute('data-preview').split('|')
+
+          timeout.set(() => previewImages(true), HOVER_DELAY)
+          hoveredImg.el.addEventListener('mouseleave', () => {
+            hoveredImg.reset()
+            timeout.reset()
+          })
+          
+          //console.log(img.id);
+          //mouseEnterListener(img);
+          //console.log(`${img.id}, img position :${img.dataset.posy} , scroll positions: ${last_known_scroll_position}`);
+        }
+      })
+  }
+
+  const setPosYImages = () => {
+    images.forEach(img => {
+      img.dataset.posy = img.getBoundingClientRect().y;
+    })
+  }
+
+    window.addEventListener('scroll', function(){
+      almover();
+    })
+
+    window.addEventListener('load', function(){
+      setPosYImages();
+    })
+
+
 })()