<div id="abstract">
  <img id="one" src="//c1.staticflickr.com/8/7760/27172249236_60557deeb9_c.jpg">
  <img id="two" src="//c1.staticflickr.com/8/7246/6990316898_a1d3503a9a_k.jpg">
  <img id="three" src="//c1.staticflickr.com/8/7313/27206172255_966431b09f_c.jpg">
  <img id="four" src="//c1.staticflickr.com/8/7729/26601049343_110ae05103_c.jpg">
  <img id="five" src="//c1.staticflickr.com/8/7132/7651263500_ec17599254_n.jpg">
</div>

<!-- Nicola Paintings
    <img id="one" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/387928/mason-1.jpg">
    <img id="two" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/387928/mason-2.jpg">
 -->
#text 
  font-size: 1.2rem
  height: 500px
  width: 650px
  margin: 50px auto
  border-radius: 3px

#abstract 
  height: 500px
  width: 630px
  margin: 50px auto
  border: 15px solid #181818
  border-radius: 3px
  img
    position: absolute
    height: 500px
  #two
    -webkit-animation: fade 35s ease-in-out infinite
    animation: fade 35s ease-in-out infinite
    height: 630px
    clip: rect(0px,633px,500px,0px)
  #three
    -webkit-animation: fade 40s ease-in-out infinite
    animation: fade 40s ease-in-out infinite
    clip: rect(0px,633px,500px,0px)
  #four
    -webkit-animation: fade 30s ease-in-out infinite
    animation: fade 30s ease-in-out infinite
    clip: rect(0px,633px,500px,0px)
  #five
    -webkit-animation: fade 20s ease-in-out infinite
    animation: fade 20s ease-in-out infinite
    clip: rect(0px,633px,500px,0px)
   
@keyframes fade
  0%
    opacity: 1
  60%
    opacity: 0
  100%
    opacity: 1

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js