JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://livedemo00.template-help.com/wt_pro_2.0_free_sample_template/css/style.css">
<script src="http://livedemo00.template-help.com/wt_pro_2.0_free_sample_template/js/script.js"></script>
<script src="http://livedemo00.template-help.com/wt_pro_2.0_free_sample_template/js/tms-0.4.x.js"></script>
<!--
    SO Answer by Arttronics for Stackoverflow Question: http://stackoverflow.com/q/13784178/1195891
-->



<div class="pad-slider">
    <div class="main-slider">
        <ul class="items">
            <li>
              <img src="http://img186.imageshack.us/img186/1866/halo3wallpaper1024copy9yf1.jpg" alt="" />
              <div class="slider-banner">
                <div class="imageLink" title="Click here to open Google IMAGES website." onclick="window.open('http://images.google.com/'); return true;"></div>
                <a href="http://www.google.com">
                  <span>Click here to open Google MAIN website.</span>
                </a>
              </div>
            </li>
            <li>
              <img src="http://img91.imageshack.us/img91/6278/telagawarnalakewallpapew.jpg" alt="" />
              <div class="slider-banner">
                <div class="imageLink" title="Click here to open Bing IMAGES website."  onclick="window.open('www.bing.com/images/'); return true;"></div>
                <a href="http://www.bing.com">
                  <span>Click here to open Bing MAIN website.</span>
                </a>
              </div>
            </li>
            <li>
              <img src="http://img393.imageshack.us/img393/9093/sky04jr4.jpg" alt="" />
              <div class="slider-banner">
                <div class="imageLink" title="Click here to open AltaVista IMAGES website"  onclick="window.open('http://images.search.yahoo.com/'); return true;"></div>
                  <a href="http://us.altavista.com/">
                    <span>Click here to open AltaVista MAIN website.</span>
                  </a>
         ...

CSS

/* Create a new class name that contains the dimensions of your slider (not image size, but the slider size used). */
/* Then add CSS margin-top with NEGATIVE vaule that is the same numer as height */
/* Finish this off by adding a cursor so when the DIV (banner image) is hovered, a hand is shown. */
/* Tip to view the clickable area is to add in   background-color: red;   for testing purposes. */

.imageLink {
  width: 950px;
  height: 440px;
  margin-top: -440px;
  cursor: pointer;
}