diff --git a/.gitignore b/.gitignore
index 87118f4..6a71588 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,4 @@
-
+.vscode
 # created by git-ignore
 # Logs
 logs
diff --git a/components/HeroUnit.js b/components/HeroUnit.js
index 8557b7d..ccaee4b 100644
--- a/components/HeroUnit.js
+++ b/components/HeroUnit.js
@@ -1,6 +1,7 @@
 import DownArrowIcon from '../resources/down-arrow-icon.svg'
 import NavigationBar from './NavigationBar'
 import ReactBKKLogo from './ReactBKKLogo'
+import SimpleCrossfadeImages from './SimpleCrossfadeImages'
 import Scroll from 'react-scroll'
 
 var Link = Scroll.Link
@@ -8,6 +9,7 @@ var Link = Scroll.Link
 export default function HeroUnit () {
   return (
     <header>
+      <SimpleCrossfadeImages />
       <div className='bg-overlay' />
       <div className='spacer' />
       <div className='center'>
diff --git a/components/SimpleCrossfadeImages.js b/components/SimpleCrossfadeImages.js
new file mode 100644
index 0000000..8312ffa
--- /dev/null
+++ b/components/SimpleCrossfadeImages.js
@@ -0,0 +1,53 @@
+// Simple crossfade images
+// credit: http://css3.bradshawenterprises.com/cfimg/
+
+const images = [
+  'static/hero-bg.jpg',
+  'static/hero-bg-2.jpg',
+  'static/hero-bg-3.jpg'
+]
+
+export default () => (
+  <div className='container'>
+    {images.map(image => {
+      return <div key={image} className='image' style={{ backgroundImage: `url(${image})` }} />
+    })}
+    <style jsx>{`
+      .container {
+        top: 0;
+        left:0;
+        bottom:0;
+        overflow:hidden;
+        right:0;
+        position: absolute;
+      }
+      .image {
+        top: 0;
+        left:0;
+        bottom:0;
+        right:0;
+        background-size: cover;
+        background-position: center center;
+        position: absolute;
+        animation: SimpleCrossfade 12s linear infinite 0s;
+        transform-origin: center;
+      }
+      @keyframes SimpleCrossfade {
+        0% { opacity:1; transform: scale(1); }
+        25% { opacity:1; }
+        33.3333% { opacity:0; transform: scale(1.05); }
+        50% { transform: scale(1); }
+        91.66667% { opacity: 0; }
+        100% { opacity:1;  }
+      }
+      .image:nth-of-type(1) {
+        animation-delay: 7s;
+      }
+      .image:nth-of-type(2) {
+        animation-delay: 3s;
+      }
+      .image:nth-of-type(3) {
+        animation-delay: -1s;
+      }
+    `}</style>
+  </div>)
diff --git a/static/hero-bg-2.jpg b/static/hero-bg-2.jpg
new file mode 100644
index 0000000..31ed679
Binary files /dev/null and b/static/hero-bg-2.jpg differ
diff --git a/static/hero-bg-3.jpg b/static/hero-bg-3.jpg
new file mode 100644
index 0000000..34fc9bc
Binary files /dev/null and b/static/hero-bg-3.jpg differ
diff --git a/static/hero-bg.jpg b/static/hero-bg.jpg
index 9a34bd5..ad1ec0f 100644
Binary files a/static/hero-bg.jpg and b/static/hero-bg.jpg differ