I currently have 5 crossfading images with a hover div to appear above the image. I have added a link reference to each image below and set the css to the "a" component in order for the images to pan in and out properly.

```css
      .crossfade_container {
        display: inline-block;
        float: right;
        position: relative;
        background-color: #f0f0f0;
        width: 695px;
        height: 350px;
        margin-top: 10px;
        box-shadow: 2px 2px 2px silver;
      }
      #crossfade a {
        width: 695px;
        height: 350px;
        position: absolute;
        top: 0px;
        left: 0px;
        color: transparent;
        opacity: 0;
        z-index: 0;
        -webkit-backface-visibility: hidden;
        -webkit-animation: imageAnimation 60s linear infinite 0s;
        -moz-animation: imageAnimation 60s linear infinite 0s;
        -o-animation: imageAnimation 60s linear infinite 0s;
        -ms-animation: imageAnimation 60s linear infinite 0s;
        animation: imageAnimation 60s linear infinite 0s;
      }
      #crossfade .caption {
        font-size: 30px;
        opacity: 0;
        position: absolute;
        height: 75px;
        width: 665px;
        bottom: 0px;
        left: 0px;
        color: white;
        background: #00274c;
        text-align: left;
        padding-top: 10px;
        padding-left: 30px;
        border-bottom: 1px solid #00274c;
        font-weight: bold;
        line-height: 25px;
        -o-transition: .7s;
        -ms-transition: .7s;
        -moz-transition: .7s;
        -webkit-transition: .7s;
        transition: .7s;
      }
      #crossfade .caption span3 {
        font-size: 13px;
      }
      #crossfade:hover .caption {
        cursor: pointer;
        opacity: 1.0;
      }
      #crossfade:hover img {
        cursor: pointer;
      }
      #crossfade a:nth-child(2) {
        -webkit-animation-delay: 12s;
        -moz-animation-delay: 12s;
        -o-animation-delay: 12s;
        -ms-animation-delay: 12s;
        animation-delay: 12s;
      }
      #crossfade a:nth-child(3) {
        -webkit-animation-delay: 24s;
        -moz-animation-delay: 24s;
        -o-animation-delay: 24s;
        -ms-animation-delay: 24s;
        animation-delay: 24s;
      }
      #crossfade a:nth-child(4) {
        -webkit-animation-delay: 36s;
        -moz-animation-delay: 36s;
        -o-animation-delay: 36s;
        -ms-animation-delay: 36s;
        animation-delay: 36s;
      }
      #crossfade a:nth-child(5) {
        -webkit-animation-delay: 48s;
        -moz-animation-delay: 48s;
        -o-animation-delay: 48s;
        -ms-animation-delay: 48s;
        animation-delay: 48s;
      }
      @-webkit-keyframes imageAnimation {
        5% {
          opacity: 0;
          -webkit-animation-timing-function: ease-in;
        }
        8% {
          opacity: 1;
          -webkit-animation-timing-function: ease-out;
        }
        17% {
          opacity: 1
        }
        25% {
          opacity: 0
        }
        100% {
          opacity: 0
        }
      }
      @-moz-keyframes imageAnimation {
        0% {
          opacity: 0;
          -moz-animation-timing-function: ease-in;
        }
        8% {
          opacity: 1;
          -moz-animation-timing-function: ease-out;
        }
        17% {
          opacity: 1
        }
        25% {
          opacity: 0
        }
        100% {
          opacity: 0
        }
      }
      @-o-keyframes imageAnimation {
        0% {
          opacity: 0;
          -o-animation-timing-function: ease-in;
        }
        8% {
          opacity: 1;
          -o-animation-timing-function: ease-out;
        }
        17% {
          opacity: 1
        }
        25% {
          opacity: 0
        }
        100% {
          opacity: 0
        }
      }
      @-ms-keyframes imageAnimation {
        0% {
          opacity: 0;
          -ms-animation-timing-function: ease-in;
        }
        8% {
          opacity: 1;
          -ms-animation-timing-function: ease-out;
        }
        17% {
          opacity: 1
        }
        25% {
          opacity: 0
        }
        100% {
          opacity: 0
        }
      }
      @keyframes imageAnimation {
        0% {
          opacity: 0;
          animation-timing-function: ease-in;
        }
        8% {
          opacity: 1;
          animation-timing-function: ease-out;
        }
        17% {
          opacity: 1
        }
        25% {
          opacity: 0
        }
        100% {
          opacity: 0
        }
      }
```

```html
<div class="crossfade_container">
  <div id="crossfade">
    <a href="http://espn.com">
      <img src="the-schott.png" alt="" />
      <div class="caption">PREVIEW:
        <br />
        <span3>preview addition info</span3>
      </div>
    </a>

    <a href="http://yahoo.com">
      <img src="stump.png" alt="" />
      <div class="caption">TITLE TWO
        <br />
        <span3>subtitle two</span3>
      </div>
    </a>

    <a href="http://gmail.com">
      <img src="um_huddle1.png" alt="" />
      <div class="caption">TITLE ONE
        <br />
        <span3>subtitle one</span3>
      </div>
    </a>

    <a href="http://hotmail.com">
      <img src="osu_crossfade2.png" alt="" />
      <div class="caption">Caption Goes Here</div>
    </a>

    <a href="http://fox.com">
      <img src="um_qb1.png" alt="" />
      <div class="caption">Caption Goes Here</div>
    </a>

  </div>
</div>
```

I cannot figure out why every time i click on the image or "caption" div, i am directed to fox.com??