<link rel="stylesheet" href="http://www.idiophonebox.com/codepen/owl/assets/owl.carousel.css">

<body>
  
<div  class="owl-carousel">
  <div class="item"> 
      <img class="owl-lazy" data-src="http://placehold.it/350x150?text=An+Image" alt="An Image">
      <span class="text-container">
          <h4 class="list-heading">Image title</h4>
          <h5 class="overline">A short description</h5>
          <div class="rich-text"><p>More stuff about this<br></p></div>
          <div class="caption">Image Credit: Froms someone</div>
      </span>

      </a>
  </div>
  <div class="item">  
    <img class="owl-lazy" data-src="http://placehold.it/350x150?text=A+Second+Image" alt="An Image"> 
          <span class="text-container">
          <h4 class="list-heading">Another Image title</h4>
          <h5 class="overline">A short description</h5>
          <div class="rich-text"><p>More stuff about this<br></p></div>
          <div class="caption">Image Credit: Froms someone</div>
      </span>
</div>
  <div class="item">  
    <img class="owl-lazy" data-src="http://placehold.it/350x150?text=A+Third+Image" alt="An Image">
      <span class="text-container">
          <h4 class="list-heading">Image title</h4>
          <h5 class="overline">A short description</h5>
          <div class="rich-text"><p>More stuff about this<br></p></div>
          <div class="caption">Image Credit: Froms someone</div>
      </span>
</div>
  <div class="item">  
    <img class="owl-lazy" data-src="http://placehold.it/350x150?text=A+Fourth+Image" alt="An Image"> 
      <span class="text-container">
          <h4 class="list-heading">Image title</h4>
          <h5 class="overline">A short description</h5>
          <div class="rich-text"><p>More stuff about this<br></p></div>
          <div class="caption">Image Credit: Froms someone</div>
      </span>
</div>
</div>

<div class="notes">
<p>
  Resource: <a href="https://www.kirupa.com/html5/ken_burns_effect_css.htm">The Ken Burns Effect using CSS Animations</a>
</p>
<p>Current version of <a href="http://www.owlcarousel.owlgraphic.com/">Owl</a> only works on jQuery 1.7.0 or earlier. The live version of the <a href="http://www.maah.org">MAAH site</a> runs on <a href="http://owlgraphic.com/owlcarousel/">Owl v1.3.2</a>. This demo runs on <a href="http://www.owlcarousel.owlgraphic.com/">Owl v2.0</a> so I tweaked the JS a bit from the original version I wrote.</p>
  <p>View all of the pens for this project: <a href="https://codepen.io/collection/DoLBVg/">MAAH collection on codepen</a>.
</div>

</body>
@import url(https://fonts.googleapis.com/css?family=Cantarell:400,400i,700|Fjalla+One|Hind:400,300,600);

// Colors
$maroon: #9E0009;
$tan: #FFFCF2;
$grey-one: #333333;
$grey-two: #C8C7C3;
$grey-three: #EDEDED;
$white: #FFFFFF;

$bkp-medium: 800px;

body{
  -webkit-font-smoothing: antialiased;
  font-family: 'Cantarell', sans-serif;
  width:80%;
  margin:20px auto;
}


a{
  &:link, &:visited, &:active{
    color:$maroon;
    text-decoration:none;
    font-weight:bold;
  }
  &:hover{
    text-decoration:underline;
  }
}

.owl-item.active{
  .item img{
    animation: mobileburns 30s infinite;
  }
  @media screen and (min-width: $bkp-medium) {
    .item img{
      animation: kenburns 30s infinite;
    }

  }
}

.item{
  position: relative;
  overflow: hidden;
  .text-container{
    position: relative;
    background-color: #232323;
    width:100%;
    padding:20px 0;
    display:block;
    @media screen and (min-width: $bkp-medium) {
      position: absolute;
      bottom:0;
      background-color: rgba(0,0,0,.50);
      padding:20px 0 10px 0;
    }
      &.linked-item:hover{
        background-color: rgba(0, 0, 0, 0.8);
        span{
          text-decoration:underline;
        }
      }
  }
  .text-container > *{
    padding: 0 20px 0 20px;
    color: $white;
    margin: 0 0 .3rem 0;
  }
  p{
    color: $white;
    margin: 0 0 .3rem 0;
  }
  h4.list-heading{
    font-family: 'Fjalla One', sans-serif;
    font-size: 1.3rem;
    line-height: 1.7rem;
    @media screen and (min-width: $bkp-medium) {
      font-size: 2.5rem;
      line-height: 3.1rem;
    }
  }
  h5.overline{

    font-family: 'Cantarell', sans-serif;
    font-size: 1.25rem;
    line-height: 1.875rem;
    text-transform: none;
    font-weight: 400;
    @media screen and (min-width: $bkp-medium) {
      font-size: 1.5rem;
    }
  }
  img{
    display: block;
    max-height:300px;
    margin:0 auto;
    width:100%;
    @media screen and (min-width: $bkp-medium) {
      width:100%;
      max-height:640px;
    }
  }
}

/* ANIMATIONS */
@keyframes kenburns {
    5%{
        transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
        animation-timing-function: ease-in;
    }
    45% {
        transform: scale3d(1.5, 1.5, 1.5) translate3d(-100px, -30px, 0px);
        animation-timing-function: ease-in;
    }
    60%{
      transform: scale3d(1.5, 1.5, 1.5) translate3d(-100px, -30px, 0px);
      animation-timing-function: ease-in;
    }
    100%{
        transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
        animation-timing-function: ease-in;
    }
}

@keyframes mobileburns {
    5%{
        transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
        animation-timing-function: ease-in;
    }
    65% {
        transform: scale3d(2.5, 2.5, 2.5) translate3d(-100px, -30px, 0px);
        animation-timing-function: ease-in;
    }
    80%{
      transform: scale3d(2.5, 2.5, 2.5) translate3d(-100px, -30px, 0px);
      animation-timing-function: ease-in;
    }
    100%{
        transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
        animation-timing-function: ease-in;
    }
}

@keyframes noburns {
    100%{
        transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
        animation-timing-function: ease-in;
    }

}
View Compiled
$(document).ready(function(){
  $(".owl-carousel").owlCarousel({
        items:1,
        navigation: true,
        autoplay : true,
        pagination: true,
        stopOnHover: true,
        //lazyLoad: false
        lazyLoad: true,
        // addClassActive: true,
        loop:true,
        afterAction: afterAction
  });
});

function changeClass(slide){

    setTimeout(function(){

         $(".owl-item").each(function(){
          if ($(this).index() === slide){
            $(this).addClass("active");
          } else{
           $(this).removeClass("active");
          }
        });

    },500);
  }

function afterAction(){
  changeClass(this.owl.currentItem);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js
  2. https://www.idiophonebox.com/codepen/owl/owl.carousel.min.js