<div class="cards">
  <div class="card">
    <img src="https://via.placeholder.com/150/00b894/00b894" alt="">
    <p>CSS Fancy</p>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/150/00cec9/00cec9" alt="">
    <p>:hover</p>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/150/0984e3/0984e3" alt="">
    <p>effect</p>
  </div>
</div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.cards {
  display: flex;
  &:hover .card {
    transform: scale(0.9);
    box-shadow: 0 5px 10px -5px rgba(0,0,0,0.8);
    &:hover {
      transform: scale(1.1);
      box-shadow: 0 15px 30px -15px rgba(0,0,0,0.5);
    }
  }
}
.card {
  margin: 10px;
  padding: .5em;
  background: white;
  border-radius: 8px;
  box-shadow: 0 10px 20px -10px rgba(0,0,0,0.6);
  transition: all .3s ease;
  cursor: pointer;
  overflow: hidden;
  &:first-child {
    background: #55efc4;
  }
  &:nth-child(2) {
    background: #81ecec;
  }
  &:nth-child(3) {
    background: #74b9ff;
  }
  img {
    display: block;
    max-width: 100%;
  }
  p {
    margin: 0.5em;
    text-align: center;
    color: white;
  }
}

// CSS Hover effect