Caption Below Absolute Positioned Image

Question

I'm creating a slideshow gallery by giving the images position:absolute. The problem is, I want to have the thumbnail's title and caption underneath it, and the information is positioned underneath the thumbnail, not below.

I'm using Advanced Custom Fields and its Gallery Field add-on.

<div id="slideshow_thumb">  


    <h4>view images</h4>

        <?php 
        $images = get_field('gallery'); 
        $image_1 = $images[0]; 
        ?>    
         <?php foreach( $images as $image ): ?>


        <a href="<?php echo $image['url']; ?>" rel="fancybox"><img src="<?php echo $image_1['url']; ?>" /></a>


        <?php endforeach; ?>

        <div id="slideshow_thumb_info">
        <?php echo $image_1['title']; ?><br>
        <?php echo $image_1['caption']; ?>
        </div>


</div>

CSS

#slideshow_thumb {
width:22%;
float:left;
margin-bottom:0;
padding-bottom:0;
margin-right:3%;
}

#slideshow_thumb img {
width:22%;
height:auto;
position:absolute;
}

#slideshow_thumb a:first-of-type img{
z-index:100;
}

Answer 1

I solved it by hiding all other images except for the first image, instead of using position:absolute.

So My CSS is now:

#slideshow_thumb {
width:22%;
float:left;
margin-bottom:0;
padding-bottom:0;
margin-right:3%;
}

#slideshow_thumb img {
display:none;
width:100%;
height:auto;
}

#slideshow_thumb a:first-of-type img{
display:block;
}