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)
