A polaroid galéria egy modern és látványos webes megoldás, amely a klasszikus polaroid fényképek megjelenését idézi. A galéria célja, hogy a képeket egyedi és esztétikus formában prezentálja, dinamikus elemekkel, amelyek fokozzák a felhasználói élményt.

Az alábbi LESS és HTML kódok segítségével egy könnyen testreszabható és reszponzív galériát hozhatsz létre, amely tökéletesen illeszkedik bármely weboldal designjába. A LESS fájl felel a stílusokért, például a polaroid hatás, az árnyékok és az animációk létrehozásáért, míg a HTML szerkezet biztosítja a galéria logikus és jól strukturált alapját.

Jellemzők:

1. Polaroid stílus: Minden kép egy „polaroid keretben” jelenik meg, alatta opcionális képfelirattal.
2. Interaktív animációk: Hover-effektek a dinamikus megjelenítés érdekében.
3. Reszponzív megjelenés: A galéria automatikusan alkalmazkodik különböző képernyőméretekhez.
4. Könnyű testreszabhatóság: A LESS változók segítségével a színek, méretek és árnyékok gyorsan módosíthatók.

Használat előtt győződj meg róla, hogy a LESS fájl fordítása megtörtént CSS-re, és a szükséges képek elérhetők a megfelelő mappákban. Ez a galéria ideális választás portfóliókhoz, emlékképek bemutatásához, vagy akár egyedi weboldalak díszítéséhez.

/* ------------------------------------------------------
  Gallery category
------------------------------------------------------ */
.gallery_category {
  width: 100%;
  padding: 0 2rem 30px 2rem;
  text-align: center;

  .item {
    width: 30%;
    display: inline-block;
    margin-top: 2rem;
    filter: grayscale(100%);

    @media @mobile, @tablet, @desktop {
      width: 100%;
    }



    &:nth-of-type(4n+1) {
      transform: scale(0.8, 0.8) rotate(5deg);
      transition: all 0.35s;
      .polaroid {
        &::before {
          transform: rotate(6deg);
          height: 20%;
          width: 47%;
          bottom: 30px;
          right: 12px;
          box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.4);
        }
      }
    }
    &:nth-of-type(4n+2) {
      transform: scale(0.8, 0.8) rotate(-5deg);
      transition: all 0.35s;
      .polaroid {
        &::before {
          transform: rotate(-6deg);
          height: 20%;
          width: 47%;
          bottom: 30px;
          left: 12px;
          box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.4);
        }
      }
    }

    &:nth-of-type(4n+4) {
      transform: scale(0.8, 0.8) rotate(3deg);
      transition: all 0.35s;

      .polaroid {
        &::before {
          transform: rotate(4deg);
          height: 20%;
          width: 47%;
          bottom: 30px;
          right: 12px;
          box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.3);
        }
      }

    }
    &:nth-of-type(4n+3) {
      transform: scale(0.8, 0.8) rotate(-3deg);
      transition: all 0.35s;

      .polaroid {
        &::before {
          transform: rotate(-4deg);
          height: 20%;
          width: 47%;
          bottom: 30px;
          left: 12px;
          box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.3);
        }
      }
    }


    .polaroid {
      background: #fff;
      padding: 1rem;
      box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.2);

      &::before {
        content: '';
        position: absolute;
        z-index: -1;
        transition: all 0.35s;
      }

      &>img {
        max-width: 100%;
        height: auto;
      }

      .caption {
        font-size: 80px;
        text-align: center;
        font-family: @font-2;


        @media @mobile, @tablet, @desktop {
          font-size: 50px;
        }
        @media @laptop {
          font-size: 60px;
        }
        @media @large {
          font-size: 70px;
        }
      

      }
    }
    &:hover {
      filter: none;
      transform: scale(1, 1) rotate(0deg) !important;
      transition: all 0.35s;

      .polaroid {
        &::before {
          content: '';
          position: absolute;
          z-index: -1;
          transform: rotate(0deg);
          height: 90%;
          width: 90%;
          bottom: 0%;
          right: 5%;
          box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
          transition: all 0.35s;
        }
      }

    }
  }
}

<section>

    <div class="gallery_category">
        <a class="item" href="?page=galeria-reszletek">
            <div class="polaroid"><img src="../gfx/content/villa-touri.jpg" alt="Szállások" title="Szállások">
                <div class="caption">Szállások</div>
            </div>
        </a>

        <a class="item" href="?page=galeria-reszletek">
            <div class="polaroid"><img src="../gfx/content/rendezvenyter/1.jpg" alt="Rendezvénytér" title="Rendezvénytér">
                <div class="caption">Rendezvénytér</div>
            </div>
        </a>

        <a class="item" href="?page=galeria-reszletek">
            <div class="polaroid"><img src="../gfx/content/img_leka.jpg" alt="Élmények" title="Élmények">
                <div class="caption">Élmények </div>
            </div>
        </a>
<?php /*
        <a class="item" href="?page=galeria-reszletek">
            <div class="polaroid"><img src="https://image.ibb.co/crFarc/pexels_photo_100756.jpg">
                <div class="caption">Summer Day</div>
            </div>
        </a>

        <a class="item" href="?page=galeria-reszletek">
            <div class="polaroid"><img src="https://image.ibb.co/fvekrc/action_adult_art_673649.jpg">
                <div class="caption">Art</div>
            </div>
        </a>
*/ ?>
    </div>

</section>