ביטול כפתור, קישור או נעילת קופסא – הגדרות נעילה, פילטרים ושקיפות

לפעמים אנחנו רוצים לייצר מיצג חזותי של אזור נעול, פריט נעול, או כפתור מבוטל. הדרך לבצע את זה היא באמצעות שקיפות, פילטר שחור-לבן, וביטול פעולת הכפתור (a), עם קוד ה-CSS הבא:

.locked {
  opacity:0.5;
}
.locked img {
  filter: grayscale(100%);
}
.locked a {
  pointer-events: none;
} /*טקסט בקרוב*/
.locked .desc:before {
  content:"Coming Soon";
  color:white;
  font-weight:600;
  text-transform:uppercase;
  position:relative;
  top:-30px;
}