Skip to content

Instantly share code, notes, and snippets.

@benbjurstrom

benbjurstrom/image.blade.php

Created December 27, 2023 18:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save benbjurstrom/e6978a12a2ce08459756f53e47e66e24 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save benbjurstrom/e6978a12a2ce08459756f53e47e66e24 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. benbjurstrom created this gist Dec 27, 2023.
    14 changes: 14 additions & 0 deletions image.blade.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    <div @class(['overflow-hidden', $class])>
    <div
    class="blur-lg bg-cover bg-no-repeat"
    style="background-image: url('{{$placeholder}}');"
    >
    <img
    :key="{{$id}}"
    class="h-full w-full transition duration-200 ease-in opacity-0"
    src="{{$src}}"
    onload="this.classList.remove('opacity-0');
    this.parentNode.classList.remove('blur-lg');"
    >
    </div>
    </div>