title: How to insert a shadow below the slider
body: <p>I have the following slider in my asp.net page:</p>
  
  <pre><code>&lt;div class="sliderContent"&gt;
  &lt;div id="sliderFrame"&gt;
      &lt;div id="slideIT" class="sliderHolderMain"&gt;
      &lt;div u="slides" class="sliderHolder"&gt;
          &lt;div&gt;
              &lt;img u="image" src="theImages/slider/1.jpg" /&gt;
              &lt;div u="caption" t="CLIP|L" class="sliderCapMain"&gt;
                  &lt;div class="sliderCapBG"&gt;&lt;/div&gt;
                  &lt;div class="sliderCapText"&gt;
                      &lt;span class="sliderCapTextHdr"&gt;Healthy Cooking&lt;/span&gt;
                      &lt;br /&gt;
                      &lt;span class="sliderCapTextFtr"&gt;Discover simple solutions to cook delicious and healthy meals for you and your family. Cooking tips, how-to guides and more!&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;img u="image" src="theImages/slider/2.jpg" /&gt;
              &lt;div u="caption" t="CLIP|L" class="sliderCapMain"&gt;
                  &lt;div class="sliderCapBG"&gt;&lt;/div&gt;
                  &lt;div class="sliderCapText"&gt;
                      &lt;span class="sliderCapTextHdr"&gt;Healthy Cooking&lt;/span&gt;
                      &lt;br /&gt;
                      &lt;span class="sliderCapTextFtr"&gt;Discover simple solutions to cook delicious and healthy meals for you and your family. Cooking tips, how-to guides and more!&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;div style="width: 1100px; min-width: 1000px; height: 10px; background: url(theImages/dropShadow.png) repeat-x; position: relative; margin: 0 auto; bottom: 0;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.sliderContent
  {
      width: 100%;
      overflow: hidden;
      margin: 0 auto;
      text-align: center;
  }
  #sliderFrame 
  {
      position: relative;
      width: 100%;
      margin: 0 auto; /*center-aligned*/
  }
  .sliderHolderMain
  {
      position: relative;
      margin: 0px;
      padding: 0px;
      float: left;
      top: 0px;
      left: 0px;
      width: 1100px;
      height: 337px;
      overflow: hidden;
  }
  .sliderHolder
  {
      cursor: move;
      position: absolute;
      left: 0px;
      top: 0px;
      width: 1100px;
      height: 337px;
      overflow: hidden;
  }
  .sliderCapMain
  {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 300px;
      height: 337px;
      text-align: center;
  }
  .sliderCapBG
  {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.75);
      filter: alpha(opacity=75);
  }
  .sliderCapText
  {
      position: absolute;
      top: 5%;
      left: 5%;
      color: #000;
      text-align: left;
  }
  .sliderCapTextHdr
  {
      color: #0074C9;
      font-weight: normal;
  }
  .sliderCapTextFtr
  {
      color: #000;
      font-size: small;
  }
  </code></pre>
  
  <p>Attached image of what it looks like:</p>
  
  <p><img src="https://i.stack.imgur.com/BAmKW.png" alt="enter image description here"></p>
  
  <p>As you can see the shadow is at the top of the slider pointed by the red arrow.</p>
  
  <p>How can I modify the CSS so it appears below the slider, giving it a 3D view</p>