JSFiddle - React, Tailwind, and code Playground

by rami7250

HTML

<div class="bodg">
<div class="grid">
  <div class="grid-item"><div class="overlay">שרתים וטרמינלים</div></div>
  <div class="grid-item"><div class="overlay">Category 2</div></div>
  <div class="grid-item"><div class="overlay">Category 3</div></div>
  <div class="grid-item"><div class="overlay">אבטחת מידע</div></div>
  <div class="grid-item"><div class="overlay">מערכות הפעלה</div></div>
  <div class="grid-item"><div class="overlay">סייבר</div></div>
  <div class="grid-item"><div class="overlay">Category 7</div></div>
  <div class="grid-item"><div class="overlay">Category 8</div></div>
  <div class="grid-item"><div class="overlay">Category 9</div></div>
</div>

CSS

bodg { margin: 0px; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #f0f0f0;}
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; width: 90%; max-width: 1200px; padding:25px;}
.grid-item { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background-size: cover; background-position: center; border-radius:10px;font-family:'calibri'; }
.grid-item:hover {transform: scale(1.1);transition: all 0.5s;cursor:pointer;}
.grid-item:nth-child(1) { background-image: url('https://new.tiktakit.com/wp-content/uploads/250/1.jpg'); }
.grid-item:nth-child(2) { background-image: url('https://new.tiktakit.com/wp-content/uploads/250/2.jpg'); }
.grid-item:nth-child(3) { background-image: url('https://new.tiktakit.com/wp-content/uploads/250/3.jpg'); }
.grid-item:nth-child(4) { background-image: url('https://new.tiktakit.com/wp-content/uploads/250/4.jpg'); }
.grid-item:nth-child(5) { background-image: url('https://new.tiktakit.com/wp-content/uploads/250/5.jpg'); }
.grid-item:nth-child(6) { background-image: url('https://new.tiktakit.com/wp-content/uploads/250/6.jpg'); }
.grid-item:nth-child(7) { background-image: url('https://new.tiktakit.com/wp-content/uploads/250/7.jpg'); }
.grid-item:nth-child(8) { background-image: url('https://new.tiktakit.com/wp-content/uploads/250/8.jpg'); }
.grid-item:nth-child(9) { background-image: url('https://new.tiktakit.com/wp-content/uploads/250/9.jpg'); }
.overlay { position: absolute; bottom: 0; width: 100%; height: 20%; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; color: #fff; font-size: calc(1rem + 0.2vw); font-weight: bold; }

.grid-item:nth-child(1):after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: transparent;
  z-index: 2;
  pointer-events: none;
}

.grid-item:nth-child(1):hover:after {
  content:...