title: Dynamic image and description not showing properly
body: <p><a href="https://i.stack.imgur.com/gaQeT.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gaQeT.jpg" alt="enter image description here"></a>In my <code>PHP</code> project home page slider image are showing properly while add the image description with image slider. it all come for all images</p>
  
  <p><strong>here i attached code for that:</strong></p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div id="zoom-slider"&gt;
          &lt;?php foreach($slider_image as $slider ){?&gt;
          &lt;div&gt;
              &lt;img src="&lt;?php echo base_url();?&gt;admin/assets/upload/&lt;?php echo $slider['image_name']; ?&gt;" alt="" /&gt;
              &lt;div class="bannertext" style="right:10%;top:20%;color:#ffffff;"&gt;
                  &lt;h3&gt;&lt;?php echo $slider['image_description']; ?&gt;&lt;/h3&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;?php }?&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Css Style:</strong></p>
  
  <pre><code>.bannertext{width: 50%;position:absolute;z-index:999; text-align: right;}
  .bannertext h3{font-size: 50px; color: #FFFFFF; font-weight: bold; text-shadow: 3px 2px 1px rgba(12, 21, 30, 0.5); }    
  </code></pre>
  
  <p>Zoom Slider css added here</p>
  
  <pre><code>    canvas{
      width: 100% !important;
  }
  #zoom-slider {
      width:100% !important;
      height: 510px;/* Make it smaller than your images for zooming effect */
      overflow:hidden;
      position:absolute;
      top: 0px;
      z-index: -1
  }
  
  #zoom-slider img {
      position:absolute;
      display:none;
      top:0px;
      z-index:1;
      -ms-interpolation-mode: bicubic;
      image-rendering: optimizeQuality;
  }
  
  .rmm{
      max-width: 100% !important;
  }
  
  
  div.zs-caption-bg {
      background:#000;/*Caption background color. Can be defined as semi-transparent through the javascript slideshowOptions setting.*/
      border-radius: 5px;
      border:1px solid #CCCCCC;
  }
  div.zs-caption {
      font:bold 17px/19px Verdana, Arial;
      color:White;
      z-index:7;
      text-align:center;/* When captionEffect was set to rotate through javascript, and setting "text-align:left" will create a fly-in effect, and setting "text-align:center" will get the rotate effect. */
      overflow:hidden;
  }
  div.zs-caption a {
      color:#09F;
  }
  
  
  
  div.navBulletsWrapper  {
      background: none;
      position: absolute;
      z-index: 9999999;
      bottom: 50px;
      cursor: pointer;
      right: 200px;
      background-color: rgba(255, 255, 255, 0.4);
      border-radius: 6px;
  }
  
  
  div.navBulletsWrapper div 
  {
      width:12px;
      height:12px;
      background:transparent url(../images/bullets.png) no-repeat 0 0;
      float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
      margin:12px 10px;/* distance between each bullet*/
      _position:relative;/*IE6 hack*/
  }
  
  div.navBulletsWrapper div.active {background-position:0 -12px;}
  
  
  
  #zoom-slider img
  {
      transform: translate3d(0,0,0);
      -ms-transform:translate3d(0,0,0);
      -moz-transform:translate3d(0,0,0);
      -o-transform:translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
  }
  </code></pre>