<ul class="Seasons">
  <li class="active">
    <img src="http://kingofwallpapers.com/summer/summer-002.jpg" alt="" />
  </li>
  <li>
    <img src="http://media.mnn.com/assets/images/2015/12/winter-solstice-facts.jpg.653x0_q80_crop-smart.jpg" alt="" />
  </li>
  <li>
    <img src="http://www.thehealthyveggie.com/wp-content/uploads/2016/03/spring-daffodils_2845661b.jpg" alt="" />
  </li>
</ul>
<ul class="Picker">
  <li>
    <a href="#">Summer</a>
  </li>
  <li>
    <a href="#">Winter</a>
  </li>
  <li>
    <a href="#">Spring</a>
  </li>
</ul>

.Seasons {
  list-style: none;
  position: relative;
  top: 2em;
  width: 100%;
  height: auto;
  li {
    display: none;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%;
    height: auto;
    &.active {
      display: inline-block;
    }
    img {
      width: 400px;
      height: 300px;
    }
  }
}
.Picker {
  width: 300px;
  text-align: center;
  list-style: none;
  li {
    display: inline;
    margin: 8px;
  }
}

$('.Picker li').on('mouseover', function() {
  var i = $(this).index();
  $('.Seasons > li.active').fadeOut(200, function() {           
  	$(this).removeClass('active').parent('ul').children('li').eq(i).fadeIn(100).addClass('active');
  });
});