پیش‌نمایش زنده
کد HTML
<div class="container">
    <div class="card">
        <span>Hover me</span>
    </div>
    <div class="card">
        <span>Hover me</span>
    </div>
    <div class="card">
        <span>Hover me</span>
    </div>
</div>
کد CSS
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px;
}

.card {
  margin: 2%;
  background: #DBBDBD;
  width: 70px;
  height: 100px;
  box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  transition: .2s all;
  cursor: pointer;
  align-items: center;
  text-align: center;
  font-size: 13px;
  padding-top: 30px;
}

.card > span {
  display: block;
  margin: auto;
  max-width: 40px;
}

.container:hover .card {
  filter: blur(3px);
  opacity: .5;
  transform: scale(.98);
  box-shadow: none;
}

.container:hover .card:hover {
  transform: scale(1);
  filter: blur(0px);
  opacity: 1;
  box-shadow: 0 8px 20px 0px rgba(0, 0, 0, 0.125);
  background: #A82C2C;
  color: white;
}
نوع: card
تاریخ ایجاد: 2026/06/06
آخرین بروزرسانی: 2026/06/06