web | image hover enlarge

Image mouse-over enlarge with thumbs and big size images

HTML

<ul class="enlarge">
    <li><img class="enlarge_thumb" src="./img/thumb1.jpg" alt=""><span><img src="./img/big1.jpg" alt=""></span></li>
    <li><img class="enlarge_thumb" src="./img/thumb2.jpg" alt=""><span><img src="./img/big2.jpg" alt=""></span></li>
    <li><img class="enlarge_thumb" src="./img/thumb3.jpg" alt=""><span><img src="./img/big3.jpg" alt=""></span></li>
    <li><img class="enlarge_thumb" src="./img/thumb4.jpg" alt=""><span><img src="./img/big4.jpg" alt=""></span></li>
</ul>

CSS

.enlarge_thumb {height:80px!important;}
ul.enlarge {list-style-type:none;padding-left: 0px;}
ul.enlarge li {display:inline;position:relative;z-index:0;margin:0 6px 0 0;}
ul.enlarge span {position:absolute;left:-9999px;}
ul.enlarge img {height:400px;}
ul.enlarge li:hover {z-index:50;cursor:zoom-in;}
ul.enlarge li:hover span {top:30px;left:-20px;}
ul.enlarge li:hover:nth-child(2) span{left:-100px;}
ul.enlarge li:hover:nth-child(3) span{left:-150px;}
ul.enlarge li:hover:nth-child(4) span{left:-200px;}
ul.enlarge li:hover:nth-child(5) span{left:-240px;}
ul.enlarge img {background-color:#eae9d4;padding:1px;box-shadow:0 0 6px rgba(132, 132, 132, .75);border-radius: 0px;}
ul.enlarge span img {padding:1px;background:#ccc;display:block;}
ul.enlarge span {padding:1px;background:#eae9d4;box-shadow:0 0 20px rgba(0,0,0,0.75);border-radius:0px;font-size:.9em;text-align:center;color:#495a62;}

PHP to help if needed

function imageviewresize($folder,$output_h){         // imageviewresize rescales images for carousel.
  foreach (scandir($folder) as $f){
    $ext = pathinfo($f, PATHINFO_EXTENSION);
    if ( $ext!='jpg' &&  $ext!='jpeg' ){continue;}
    if ( $f[0].$f[1].$f[2].$f[3]=='zzz_' ){continue;}
    $new_filename = $folder.'/zzz_'.$output_h.'_'.$f;
    #if ( is_file($new_filename) ){continue;}
    $image = new Imagick($folder.'/'.$f);
    $dim = $image->getImageGeometry();
    $orig_w = $dim['width'];
    $orig_h = $dim['height']; 
    $scale = $output_h/$orig_h;
    $image->resizeImage($orig_w * $scale,$output_h,Imagick::FILTER_LANCZOS,1);    
    $image->writeImage($new_filename);
    $image->clear();  
  }
}

function carouselgen($path,$images,$thumb_h,$enlarge_h){           // creates carousel.
    if ( !is_array($images) || $images==null ){return null;}
    echo '<ul class="enlarge">';
    for ($i=0;$i<count($images);++$i) {
        $image = $images[$i];
        $thumbimage = $path.'/zzz_'.$thumb_h.'_'.$image;
        $enlargeimage = $path.'/zzz_'.$enlarge_h.'_'.$image;
        echo '<li><img class="enlarge_thumb" src="'.$thumbimage.'" alt="">';
        echo '<span><img src="'.$enlargeimage.'" alt=""></span></li>'.PHP_EOL;     
    }
    echo '</ul>';
}