Reply To: First image in gallery bigger

• mediawerk

• February 13, 2015 at 7:25 pm

i would recommend do something like that:

<?php 
$images = get_field('gallery');
$img_count=1;
if( $images ): ?>
    
        <?php foreach( $images as $image ):
if ($img_count == 1) { ?>
<div class="large">
                <a rel="gallery" href="<?php echo $image['url']; ?>">
                     <img src="<?php echo $image['sizes']['large']; ?>" alt="<?php echo $image['alt']; ?>" />
                </a>                
            </div>
<?php } else {?>
            <div class="thumb">
                <a rel="gallery" href="<?php echo $image['url']; ?>">
                     <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
                </a>                
            </div>
<?php } 
$img_count++; ?>
        <?php endforeach; ?>    
<?php endif; ?>

instead of trying to use css only.
you probably need to add a popup-script like fancybox too, to get a result like your example.

(with help of css3, it should be possible for new browsers, to do a css only solution. look at :first-of-type for example, but i would not recommend that)