دایره دنبال کننده - فراغیب

<html>

<!-- =========================
     Product Categories
     SEO + Responsive + Mobile First
========================= -->

<section class="product-categories" dir="rtl" aria-labelledby="categories-title">

  <div class="categories-container">

    <header class="categories-header">
      <h2 id="categories-title">دسته‌بندی محصولات</h2>
      <p>محصولات باکیفیت برای خانه‌ای مدرن و کاربردی</p>
    </header>

    <div class="categories-grid">

      <!-- 1 -->
      <a href="#" class="category-card" aria-label="مشاهده محصولات اکسسوری">
        <div class="category-image">
          <img src="images/accessory.jpg"
               alt="اکسسوری کابینت و آشپزخانه"
               loading="lazy">
          <span class="follow-circle">مشاهده</span>
        </div>
        <h3>اکسسوری</h3>
      </a>

      <!-- 2 -->
      <a href="#" class="category-card" aria-label="مشاهده محصولات دستگیره">
        <div class="category-image">
          <img src="images/handle.jpg"
               alt="دستگیره کابینت"
               loading="lazy">
          <span class="follow-circle">مشاهده</span>
        </div>
        <h3>دستگیره</h3>
      </a>

      <!-- 3 -->
      <a href="#" class="category-card" aria-label="مشاهده محصولات سینک">
        <div class="category-image">
          <img src="images/sink.jpg"
               alt="سینک آشپزخانه"
               loading="lazy">
          <span class="follow-circle">مشاهده</span>
        </div>
        <h3>سینک</h3>
      </a>

      <!-- 4 -->
      <a href="#" class="category-card" aria-label="مشاهده محصولات سایلر یراق آلات">
        <div class="category-image">
          <img src="images/hardware.jpg"
               alt="سایلر و یراق آلات کابینت"
               loading="lazy">
          <span class="follow-circle">مشاهده</span>
        </div>
        <h3>سایر یراق آلات</h3>
      </a>

      <!-- 5 -->
      <a href="#" class="category-card" aria-label="مشاهده فر و ماکروفر">
        <div class="category-image">
          <img src="images/oven.jpg"
               alt="فر و ماکروفر آشپزخانه"
               loading="lazy">
          <span class="follow-circle">مشاهده</span>
        </div>
        <h3>فر و ماکروفر</h3>
      </a>

      <!-- 6 -->
      <a href="#" class="category-card" aria-label="مشاهده گاز رومیزی">
        <div class="category-image">
          <img src="images/gas.jpg"
               alt="گاز رومیزی آشپزخانه"
               loading="lazy">
          <span class="follow-circle">مشاهده</span>
        </div>
        <h3>گاز رومیزی</h3>
      </a>

      <!-- 7 -->
      <a href="#" class="category-card" aria-label="مشاهده هود آشپزخانه">
        <div class="category-image">
          <img src="images/hood.jpg"
               alt="هود آشپزخانه"
               loading="lazy">
          <span class="follow-circle">مشاهده</span>
        </div>
        <h3>هود</h3>
      </a>

      <!-- 8 -->
      <a href="#" class="category-card" aria-label="مشاهده یراق آلات">
        <div class="category-image">
          <img src="images/drawer.jpg"
               alt="یراق آلات و تجهیزات کابینت"
               loading="lazy">
          <span class="follow-circle">مشاهده</span>
        </div>
        <h3>یراق آلات</h3>
      </a>

      <!-- 9 -->
      <a href="#" class="category-card" aria-label="مشاهده شیرآلات">
        <div class="category-image">
          <img src="images/faucet.jpg"
               alt="شیرآلات آشپزخانه"
               loading="lazy">
          <span class="follow-circle">مشاهده</span>
        </div>
        <h3>شیر آلات</h3>
      </a>

      <!-- 10 -->
      <a href="#" class="category-card" aria-label="مشاهده دستگیره دیجیتال">
        <div class="category-image">
          <img src="images/digital-lock.jpg"
               alt="دستگیره دیجیتال کابینت و درب"
               loading="lazy">
          <span class="follow-circle">مشاهده</span>
        </div>
        <h3>دستگیره دیجیتال</h3>
      </a>

    </div>
  </div>
</section>


<style>

/* =========================================
   Product Categories
   Mobile First
========================================= */

.product-categories{
  width:100%;
  padding:45px 15px;
  background:#fff;
  overflow:hidden;
}

.categories-container{
  width:100%;
  max-width:1250px;
  margin:0 auto;
}

/* Header */

.categories-header{
  text-align:center;
  margin-bottom:40px;
}

.categories-header h2{
  margin:0 0 10px;
  color:#151515;
  font-size:28px;
  font-weight:800;
  line-height:1.5;
}

.categories-header p{
  margin:0;
  color:#777;
  font-size:15px;
  line-height:1.8;
}


/* =========================================
   Grid
========================================= */

.categories-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:35px 18px;
}


/* =========================================
   Category Card
========================================= */

.category-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  color:#151515;
  min-width:0;
  -webkit-tap-highlight-color:transparent;
}

.category-image{
  position:relative;
  width:min(42vw,170px);
  aspect-ratio:1/1;
  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#fff;

  border:2px solid #e8edf3;

  box-shadow:
    0 8px 25px rgba(0,0,0,.04);

  transition:
    border-color .35s ease,
    box-shadow .35s ease,
    transform .35s ease;

  overflow:visible;
}


/* Product Image */

.category-image img{
  width:78%;
  height:78%;

  object-fit:contain;

  display:block;

  transition:
    transform .35s ease,
    filter .35s ease;
}


/* =========================================
   Follow Circle
========================================= */

.follow-circle{
  position:absolute;

  width:60px;
  height:60px;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#fff;

  border:2px solid #1477ff;

  color:#1477ff;

  font-size:11px;
  font-weight:700;

  box-shadow:
    0 5px 20px rgba(20,119,255,.15);

  opacity:0;

  transform:scale(.7);

  pointer-events:none;

  z-index:5;

  transition:
    opacity .2s ease,
    transform .2s ease;
}


/* =========================================
   Title
========================================= */

.category-card h3{
  margin:14px 0 0;

  font-size:15px;
  font-weight:800;

  line-height:1.7;

  text-align:center;

  color:#222;

  transition:
    color .3s ease,
    transform .3s ease;
}


/* =========================================
   Hover
========================================= */

.category-card:hover .category-image{

  border-color:#1477ff;

  box-shadow:
    0 12px 35px rgba(20,119,255,.13);

  transform:translateY(-3px);
}

.category-card:hover .category-image img{
  transform:scale(1.04);
}

.category-card:hover .follow-circle{
  opacity:1;
  transform:scale(1);
}

.category-card:hover h3{
  color:#1477ff;
}


/* =========================================
   Active / Focus
========================================= */

.category-card:focus-visible{
  outline:3px solid rgba(20,119,255,.25);
  outline-offset:8px;
  border-radius:15px;
}


/* =========================================
   Tablet
========================================= */

@media (min-width:600px){

  .product-categories{
    padding:60px 25px;
  }

  .categories-header h2{
    font-size:34px;
  }

  .categories-header p{
    font-size:16px;
  }

  .categories-grid{
    grid-template-columns:repeat(3,1fr);
    gap:50px 25px;
  }

  .category-image{
    width:150px;
  }

  .category-card h3{
    font-size:16px;
  }
}


/* =========================================
   Desktop
========================================= */

@media (min-width:900px){

  .product-categories{
    padding:10px 30px;
  }

  .categories-header{
    margin-bottom:55px;
  }

  .categories-header h2{
    font-size:40px;
  }

  .categories-header p{
    font-size:17px;
  }

  .categories-grid{
    grid-template-columns:repeat(5,1fr);
    gap:65px 35px;
  }

  .category-image{
    width:145px;
  }

  .category-card h3{
    font-size:17px;
  }

  .follow-circle{
    width:62px;
    height:62px;
  }
}


/* =========================================
   Large Desktop
========================================= */

@media (min-width:1200px){

  .categories-grid{
    gap:70px 45px;
  }

  .category-image{
    width:145px;
  }
}


/* =========================================
   Mobile:
   No Follow Circle
   Only Highlight
========================================= */

@media (max-width:599px){

  .follow-circle{
    display:none !important;
  }

  /*
     روی موبایل با لمس کارت،
     فقط هایلایت نمایش داده می‌شود.
  */

  .category-card:active .category-image{
    border-color:#1477ff;

    box-shadow:
      0 0 0 5px rgba(20,119,255,.08),
      0 12px 30px rgba(20,119,255,.15);

    transform:translateY(-3px);
  }

  .category-card:active h3{
    color:#1477ff;
  }

}


/* =========================================
   Reduced Motion
========================================= */

@media (prefers-reduced-motion:reduce){

  .category-image,
  .category-image img,
  .follow-circle,
  .category-card h3{
    transition:none !important;
  }

}

</style>


<script>
/* =========================================
   Follow Mouse Circle
   Desktop Only
========================================= */

(function(){

  const cards = document.querySelectorAll('.category-card');

  cards.forEach(card => {

    const imageBox = card.querySelector('.category-image');
    const circle = card.querySelector('.follow-circle');

    if(!imageBox || !circle) return;

    card.addEventListener('mousemove', function(e){

      /* فقط دسکتاپ */
      if(window.innerWidth < 600) return;

      const rect = imageBox.getBoundingClientRect();

      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;

      /*
        نصف اندازه دایره
        برای قرار گرفتن مرکز دایره روی موس
      */

      const circleSize = circle.offsetWidth;
      const half = circleSize / 2;

      circle.style.left = (x - half) + 'px';
      circle.style.top  = (y - half) + 'px';

    });

    card.addEventListener('mouseenter', function(){

      if(window.innerWidth >= 600){
        circle.style.opacity = '1';
        circle.style.transform = 'scale(1)';
      }

    });

    card.addEventListener('mouseleave', function(){

      if(window.innerWidth >= 600){

        circle.style.opacity = '0';
        circle.style.transform = 'scale(.7)';

      }

    });

  });

})();
</script>

</html>