Editorial Image Grid Showcase

High-impact editorial grid with asymmetric layout, hover zoom, and modern brand storytelling
SaaS
Preview
<section class="w-full bg-white py-16 px-6">

  <div class="max-w-7xl mx-auto">

    <!-- Grid -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 auto-rows-[200px]">

      <!-- Large Left -->
      <div class="col-span-2 row-span-2 relative group overflow-hidden rounded-2xl">
        <img src="https://images.unsplash.com/photo-1599058917212-d750089bc07e?q=80&w=1200&auto=format&fit=crop"
             class="w-full h-full object-cover transition duration-500 group-hover:scale-110">
        <div class="absolute inset-0 bg-black/30 opacity-0 group-hover:opacity-100 transition"></div>
        <div class="absolute bottom-4 left-4 text-white opacity-0 group-hover:opacity-100 transition">
          <h3 class="text-lg font-semibold">Move with purpose</h3>
        </div>
      </div>

      <!-- Top Center -->
      <div class="col-span-2 relative group overflow-hidden rounded-2xl">
        <img src="https://images.unsplash.com/photo-1583454110551-21f2fa2afe61?q=80&w=1200&auto=format&fit=crop"
             class="w-full h-full object-cover transition duration-500 group-hover:scale-110">
      </div>

      <!-- Top Right -->
      <div class="col-span-2 md:col-span-1 relative group overflow-hidden rounded-2xl">
        <img src="https://images.unsplash.com/photo-1594737625785-a6cbdabd333c?q=80&w=1200&auto=format&fit=crop"
             class="w-full h-full object-cover transition duration-500 group-hover:scale-110">
      </div>

      <!-- Bottom Center Wide -->
      <div class="col-span-2 relative group overflow-hidden rounded-2xl">
        <img src="https://images.unsplash.com/photo-1558611848-73f7eb4001a1?q=80&w=1200&auto=format&fit=crop"
             class="w-full h-full object-cover transition duration-500 group-hover:scale-110">
        <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
        <div class="absolute bottom-4 left-4 text-white">
          <p class="text-sm">JUST DO IT</p>
        </div>
      </div>

      <!-- Bottom Right -->
      <div class="col-span-2 md:col-span-1 relative group overflow-hidden rounded-2xl">
        <img src="https://images.unsplash.com/photo-1583454110551-21f2fa2afe61?q=80&w=1200&auto=format&fit=crop"
             class="w-full h-full object-cover transition duration-500 group-hover:scale-110">
      </div>

    </div>

  </div>

</section>